Flex容器中图片变形的直接原因是flex-shrink默认为1且父容器宽度不足，导致图片按基线缩放而失真；可靠解法是img{flex:0 0 auto;width:auto;height:auto}。
Flex容器中图片被压缩变形的直接原因
根本不是图片本身的问题，而是 flex-shrink 默认为 1，且父容器宽度不足时，Flex 项会主动收缩——图片作为替换元素（replaced element），其固有宽高比不会自动维持，浏览器只按 flex 基线缩放，导致拉伸或压扁。
为什么只设 flex-shrink: 0 还不够
设了 flex-shrink: 0 能阻止收缩，但若父容器太窄，图片可能溢出或触发横向滚动；若父容器太宽，图片又可能过小。真正需要同时控制的是收缩行为 + 初始尺寸基准：
-
flex-shrink: 0禁用收缩（防止变形） -
flex-basis设为图片原始尺寸或合理值（如auto、fit-content或具体宽度） - 必须配合
width: auto（否则flex-basis可能被 width 覆盖） - 对响应式场景，
flex-basis: 0+flex-grow: 1+min-width: 0是另一条路，但不保比例
flex-basis 取值对图片表现的实际影响
不同取值触发完全不同的布局逻辑：
-
flex-basis: auto：使用图片 intrinsic size（推荐起点，兼容大多数情况） -
flex-basis: content：CSS 新标准，等效于auto，但部分旧浏览器不支持 -
flex-basis: 100%：按父容器宽度算，极易导致拉伸（尤其高度未约束时） -
flex-basis: 200px：固定宽度，需配合height: auto才保比例，否则仍可能变形 - 省略
flex-basis（即只写flex: 0 0）：等价于flex-basis: 0px，图片会坍缩成一条线，必须避免
一行代码防变形的最小可靠写法
在图片自身样式上加这一行即可应对多数 Flex 变形场景：
img {
flex: 0 0 auto;
width: auto;
height: auto;
}
注意三点：① flex: 0 0 auto 明确禁用收缩、禁用放大、以内容尺寸为基准；② width: auto 和 height: auto 是关键补丁，防止 CSS 重置覆盖 intrinsic 尺寸；③ 若图片是 srcset，该写法依然有效——浏览器仍按当前选中资源的固有尺寸计算。
真正容易被忽略的是：当图片放在 flex-direction: column 的容器里时，flex-basis 控制的是高度而非宽度，此时要同步检查 max-height 和 object-fit 配合方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
