为什么在Flexbox中没有对象适合工作？

Question

我有几个列，我使用flex给出相等的宽度。每个都包含img标签，我希望这些图像能够展示object-fit: cover尺寸。

.container {

  display: flex;

  flex-direction: row;

  width: 100%;

}

.test {

  flex: 1;

  margin-right: 1rem;

  overflow: hidden;

  height: 400px;

}

img {

  object-fit: cover;

}

<div class="container">

  <div class="test"><img src="http://placehold.it/1920x1080"></div>

  <div class="test"><img src="http://placehold.it/1920x1080"></div>

  <div class="test"><img src="http://placehold.it/1920x1080"></div>

  <div class="test"><img src="http://placehold.it/1920x1080"></div>

</div>

图像没有调整大小，如本演示中所示。这是为什么？

Answer 1

对于那些不能只是“废弃容器并将图像自己作为弹性项目”的人来说，只需添加容器级别：<div class="display-flex">&nbsp; <div class="flex-grow position-relative">&nbsp; &nbsp; <div class="pos-absolute top-left-right-bottom-0">&nbsp; &nbsp; &nbsp; <img class="object-fit-cover height-width-100">