为什么图片作为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;
}以上就是为什么 Flex 容器内的图片没有压缩？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
179
收藏
