Flex项目缩小后图片变形的直接原因是子元素默认拉伸填满空间及min-width: auto限制；解决需设min-width: 0、width: 100%、height: auto，并配合object-fit控制缩放。
Flex项目缩小后图片/图标变形的直接原因
根本不是flex-shrink本身的问题，而是子元素（比如<img alt="CSS如何避免Flex项目缩小时比例变形" >或带background-image的容器）默认会拉伸以填满可用空间。浏览器对替换元素（replaced elements）有内置缩放逻辑，一旦父容器变窄，它们就按宽高比“撑开”或“压扁”。
用min-width: 0切断默认最小尺寸限制
Flex容器对子项默认施加min-width: auto（即内容最小宽度），这会让图片拒绝缩小到自身固有尺寸以下，被迫拉伸变形。解决方法是显式重置这个约束：
- 给Flex子项（尤其是包裹图片的
div或直接给<img alt="CSS如何避免Flex项目缩小时比例变形" >）加min-width: 0 - 如果子项是
<img alt="CSS如何避免Flex项目缩小时比例变形" >，还需补上width: 100%和height: auto，否则min-width: 0单独不起效 - 不要只写
overflow: hidden——它不阻止缩放，只是藏起溢出部分
.flex-item {
min-width: 0;
}
.flex-item img {
width: 100%;
height: auto;
}
用object-fit控制图片内部缩放行为
当需要保持宽高比且严格适配容器时，object-fit比单纯调width/height更可靠，尤其适合响应式卡片、头像列表等场景：
-
object-fit: cover：裁剪填充，常用于封面图 -
object-fit: contain：完整显示，留白，适合图标、logo - 必须配合
width: 100%; height: 100%才生效 - IE不支持，如需兼容得回退到
background-image + background-size
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
警惕flex-basis和width冲突导致的意外缩放
当同时设置flex-basis和width，且值不一致时，某些浏览器（特别是旧版Safari）会优先按width计算初始尺寸，再用flex-shrink压缩，结果就是先拉伸再压缩，视觉上更易变形：
立即学习“前端免费学习笔记（深入）”；
- 统一用
flex-basis定义基础尺寸，别混用width - 想让项目“尽量不缩”，设
flex-shrink: 0，而不是靠min-width硬卡 - 调试时用DevTools检查Computed面板里的
flex-basis实际值，常发现被解析成auto而非预期像素值
min-width: auto这个隐性规则上，很多人调半天flex-shrink或width，却漏掉第一层约束。 
