为什么Flexbox中的对象不适合工作？

我有几列，我使用柔性等宽。 每个包含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> 

图像没有resize，在这个演示中可以看到。 这是为什么？

Answer 1

从规格 ：

object-fit属性指定了replace元素的内容应如何适应由其使用的高度和宽度确定的框。

关键术语是： 适用于由其使用的高度和宽度确定的框

图像被replace，而不是它的容器。 而使用其高度和宽度确定的盒子与图像本身相关，而不是其容器。

所以，废弃容器，使图像本身的弹性项目。

 .container { display: flex; flex-direction: row; width: 100%; } img { object-fit: cover; flex: 1; margin-right: 1rem; overflow: hidden; height: 400px; } 

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

Answer 2

问题在于， object-fit指定了图像在img内部的绘制方式，但是您没有指定这些元素的大小，仅指定了.test父级的大小。

所以Michael_B的答案的另一种select是使图像具有与flex项目相同的大小：

 img { height: 100%; width: 100%; object-fit: cover; } 

 .container { display: flex; flex-direction: row; width: 100%; } .test { flex: 1; margin-right: 1rem; overflow: hidden; height: 400px; } img { height: 100%; width: 100%; 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>