Question

我想使用一个简单的布局，包括

图片
一些文字

文本应位于底部，图像应使用所有剩余空间。这似乎是一项简单的任务，但这是一段令人沮丧的旅程。最后，我钉了但是这个解决方案并不适用于移动设备（Android和/或Chrome）。

在桌面上看起来像这样：

不幸的是，iPad呈现如下：

文字几乎看不见，因为图像占据了所有空间。在Android上（安装了Chrome 65），它显示了一些文本，但不是全部。

我使用以下HTML代码

<html>
  <body>
    <h1>TEST 123</h1>
    <div class="wrapper img-top">
      <img class="image" src="..." />
      <div class="text">
        <h2>Header</h2>
        <p>...</p>
      </div>
    </div>
  </body>
</html>

CSS的相关部分看起来像这样（JSFiddle上的完整代码）：

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  height: calc(100vh - 85px);
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
}

.wrapper.img-top {
  grid-template-rows: 1fr auto;
}

.wrapper.img-top .image {
  grid-row: 1;
  justify-self: center;
}

.wrapper.img-top .text {
  grid-row: 2;
  justify-self: center;
}

.wrapper img.image {
  max-height: 100%;
  max-width: 100%;
}

我猜自动图像大小调整存在问题，但我不知道下一步该怎么做？我希望它具有响应性，但它不会起作用。

Answer 1

你的问题是你把固定的高度放在img-top上。你的img是，比方说，900 px，它在屏幕上与iPad和桌面不一样。由于您将图像设置为1 fr高度，因此随着屏幕越来越小，图像越来越大。所以你有两个解决方案，据我所知，首先是限制图像的大小，max-height：300px;或者尝试在.img-top上设置溢出自动。

Answer 2

感谢@Jakub Muda提出有关使用flexbox的建议。我终于通过转移到弹性箱并修复剩余的问题来解决问题。

切换到flexbox后，我遇到了同样的问题。图像大小为父包装div大小的100％。我已经通过向图像添加overflow: hidden来修复此问题，因此它不会溢出。这样工作正常，但有些图像被扭曲，因为长宽比未得到适当维护。添加object-fit: contain解决了这个问题。

完整的样本可以在JSFiddle找到，但为了完整性我也在这里添加了CSS：

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 85px);
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
}

.wrapper .image {
  justify-self: center;
  flex: auto;
  overflow: hidden;      /* Important to make sure the image stays within bounds */
  object-fit: contain;   /* Important to make sure the image keeps its aspect ratio */
}

.wrapper .text {
  justify-self: center;
  flex-basis: none;
  padding-top: 10px;
}

.wrapper img.image {
  max-height: 100%;
  max-width: 100%;
}

CSS网格似乎无法在移动设备上正常运行

2 个答案: