具有相等高度项目的Flex列具有自适应img高度

Question

我要使页面高度为100％。物品应始终等高。我不知道列中有多少项。如果项目包含img，则img应该填充项目的100％高度。

两个项目的示例：

立即：

需要：

沙箱： https://codepen.io/krosert/pen/eYJVzMK

<div class="root">
  <div class="imgWrap">
     text....
  </div>
   <div class="imgWrap blue">
     <img src="https://i.pinimg.com/originals/e2/a9/68/e2a968e625554f72e8673945be1daa33.jpg">
  </div>
</div>

body,html{
  margin: 0;
  padding: 0;
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.imgWrap{
  background-color: #832;
  flex-grow: 1;
  flex-shrink: 0;
}

img{
  height: 100%;
}

Answer 1

为了没有滚动，可以使用overflow: hidden;属性（如果适合的话）。另外，对于列，您可以使用flex容器，其中包含具有最小高度和宽度且没有填充的div。在每个div内，您将拥有一个高度和宽度为100％的图像。

希望对您有所帮助。