html - 在 flex-wrap 元素中设置图像的高度

Question

如果我使用 flex box wrap 创建一个 2x2 的 div 网格，然后在每个 div 中放置一个图像:-

<div id="wrapper">
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
</div>

#wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background-color: burlywood;
}
.item {
  flex-grow: 1;
  width: 50%;
  background-colour: bisque;
}

如果图像的原始高度比 flex 元素深，它会将我的内容推到比我为包装器设置的 100vh 更深的位置。

我希望每个图像填充其 flex 元素 div 的高度，在本例中为屏幕高度的 50%，并且图像宽度的比例正确。

我已经尝试将图像高度设置为其容器的 100%，但无法正常工作。 (除非图片原生高度较短，否则它会扩展以适合)。

如果我将 flex 元素 div 的高度显式设置为 33.333%，它也可以工作，但这对我来说似乎不是正确的解决方案。

Answer 1

另一种解决方案是将 .item 高度设置为 50%，并给 .item img 一个最大高度，如下所示:

#wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background-color: burlywood;
}
.item {
  flex-grow: 1;
  width: 50%;
  background-color: bisque;
  height: 50%;
}
.item > img {
  max-height: 100%;
}

<div id="wrapper">
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
  <div class="item"><img src="http://via.placeholder.com/100x500"></div>
</div>

这是 a fiddle如果这是您的偏好。