为什么图片作为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 容器内的图片没有压缩？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630556.html
微信扫一扫 
支付宝扫一扫 
