为什么对象适合在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

从规格：

该object-fit属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

关键术语是： 根据其使用的高度和宽度安装到盒子中

图像将被替换，而不是其容器。并且由其使用的高度和宽度确定的框与图像本身有关，而不与容器有关。

因此，报废容器并使图像本身成为可弯曲的物品。

.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>

额外细节

5.5。 调整对象大小：object-fit 属性

该object-fit属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

这是三个值：

• cover

确定替换内容的大小，以在填充元素的整个内容框时保持其长宽比。

• contain

替换后的内容的大小可保持其纵横比，同时适合元素的内容框。

• fill

替换内容的大小可填充元素的内容框。

与cover所述图像保持其宽高比，并覆盖所有可用空间。使用此选项，大部分图像可能会在屏幕外裁剪。

随着contain纵横比也保持，但图像进行缩放以适应箱内。这可能会导致左侧和/或右侧的空白（人像适合），或顶部和/或底部的空白（横向适合）。该object-position属性可用于在其框内移动图像。

使用fill宽高比时，图像将被调整为适合盒子的大小。