为什么在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">

  <div class="flex-grow position-relative">

    <div class="pos-absolute top-left-right-bottom-0">

      <img class="object-fit-cover height-width-100">