为什么 Flex 容器内的图片没有压缩？

发布日期： 2024-10-24 阅读量： 作者： 网络

为什么 flex 容器内的图片没有压缩？

为什么图片作为flex的子元素没有被压缩？

在示例代码中，有一个flex容器 .main-box1，内含多张图片。但是，图片没有被flex container压缩，仍然保持原始大小。这是为什么？

原因：flex子元素的默认最小大小

flex容器的子元素默认具有 min-width 和 min-height 值为 auto。对于图片元素，auto 意味着内容大小或元素本身大小中的较小值。由于图片大小是内容大小，因此图片的最小宽度和高度都是其自身大小，不会被容器压缩。

解决方法：设置最小宽度为0

要使子元素自动缩小，可以将 min-width 设置为0。这告诉浏览器，无论内容大小如何，元素的最小宽度都为0，可以被容器压缩。

修改后的css代码如下：

.main-box1 img,
.main-box2 div {
  min-width: 0;
  width: 100px;
  height: 100px;
}

随便看看