首页 文章

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

提问于
浏览 次
1

如果我使用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;
}

如果图像的原始高度比弹性项目更深，它将推送我的内容比我设置包装器的100vh更深 .

我希望每个图像填充其flex项div的高度，在此示例中为屏幕高度的50％，并且图像宽度为正确的比例 .

我已经尝试将图像高度设置为其容器的100％，但我无法使其工作 . （除非图像原生高度更短，然后它将扩展到适合） .

如果我明确地将flex项目div的高度设置为33.333％，它也可以工作，但这对我来说似乎不是正确的解决方案 .

html css css3 flexbox

2 回答

  • 0

    另一种解决方案是将 .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如果这是你的偏好 .

    回复于
  • 1

    您只需设置图像的高度即可使其保持正确的比例 . 将以下类添加到CSS以应用 50vh 的高度，我认为如果我理解正确，您的问题将得到解决 .

    .item img {
  height:50vh;
}

    您可以随意调整以获得所需内容 .

    希望这可以帮助 .

    回复于

相关问题