为什么'object-fit”不能正确处理 Flexbox 容器内的图像？

为什么 object-fit 在 Flexbox 中不起作用？

当尝试将 object-fit: cover 属性应用于 Flexbox 列中的图像时，用户可能会遇到图像未按预期调整大小的问题。解释在于object-fit属性的规范。

根据CSS规范，object-fit确定替换元素内容在由其使用的高度和宽度建立的盒子内的适合度。对于图像，被替换的元素是图像本身，而不是其容器。因此，object-fit 属性适用于图像自身的高度和宽度，而不是 Flex 项目的尺寸。

解决方案：

要解决此问题，请重构Flexbox 设置，使图像本身成为 Flex 项目。这使得 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>

通过将图像设为 Flex 项目，object-fit 属性现在可以正确地将图像适合分配的弹性容器空间，从而实现所需的封面尺寸调整行为。

以上是为什么'object-fit”不能正确处理 Flexbox 容器内的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！