为什么'object-fit”不能处理 Flexbox 列中的图像？

理解为什么“object-fit”在 Flexbox 中不起作用

在此探究中，目标是利用“object-fit” -fit: cover" 属性来缩放 Flexbox 列中的图像。然而，据观察，图像仍未调整。本文阐明了底层机制并提供了解决方案。

“object-fit”背后的原理

根据规范，“object-fit”指导如何替换元素的内容适合由其高度和宽度定义的框。

密钥观察

至关重要的是，“object-fit”属性不适用于父容器，而是适用于被替换的元素本身（在本例中为图像）。

解决方案：嵌套在 Flex 项目中

要解决此问题，图像应成为 Flex 项目而不是嵌套在 Flex 中容器。

修订后的代码

.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="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="为什么'object-fit”不能处理 Flexbox 列中的图像？" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="为什么'object-fit”不能处理 Flexbox 列中的图像？" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="为什么'object-fit”不能处理 Flexbox 列中的图像？" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="为什么'object-fit”不能处理 Flexbox 列中的图像？" >
</div>

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