Question

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

@Component({
     selector: 'my-component',
     templateUrl: './my-component.component.html'
}) 

export class MyComponent {

     foo: string; 

}

如果图像的原始高度比弹性项目更深，它会将我的内容推到比设置我的包装器的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，如果这是您的偏好。

Answer 2

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

.item img {
  height:50vh;
}

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

希望这有帮助。

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

2 个答案: