能，但需在图片或其父容器上设flex-shrink: 0并配合width/height/object-fit等属性，否则默认收缩会导致变形；优先用flex-shrink锁定尺寸，再用object-fit控制内容填充。
Flex容器里图片被压扁了，flex-shrink真能管用？
能，但不是直接加在图片上——它默认就生效，而问题恰恰出在这里。img 在 Flex 容器中属于「可收缩的弹性项目」，只要容器空间不足，flex-shrink: 1（默认值）就会强制压缩图片宽度，导致变形。
常见错误现象：<img src="logo.png"> 在窄屏或小卡片里变成一坨竖条，宽高比全丢；用 width: 100% 反而更糟，因为和 flex-shrink 叠加后缩得更狠。
- 真正该动手的地方是图片的父容器（即 Flex 项目），不是
img本身 - 设
flex-shrink: 0给图片的直接父元素（比如一个<div>包裹层），而不是给img - 如果没包一层，就给
img加flex-shrink: 0—— 但必须同时声明flex-basis或width，否则可能失效
为什么只设 flex-shrink: 0 还是变形？
因为浏览器会先按 flex-basis 算初始尺寸，再决定是否收缩。如果没设 flex-basis，它会 fallback 到 width，而图片的 width 默认是 auto，也就是“内容宽度”，Flex 引擎没法据此锁定比例。
使用场景：响应式头像、商品图卡、带文字说明的图标组——这些都需要保持原始宽高比。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
img { flex-shrink: 0; width: 100%; height: auto; }（注意height: auto是关键） - 更稳的写法：用包裹层 +
object-fit，比如<div style="flex-shrink:0; width:80px; height:80px;"><img src="x.jpg" style="width:100%; height:100%; object-fit:cover;"></div> - 别信
min-width: 0能救场——它只影响最小尺寸计算逻辑，不阻止压缩变形
flex-shrink 和 object-fit 到底谁该优先？
object-fit 解决的是“图片内容怎么填满容器”，flex-shrink 解决的是“容器自己要不要变小”。两者不在同一层，不能互换。
性能影响：设 flex-shrink: 0 不影响渲染性能，但若大量图片都禁用收缩，可能在窄屏下溢出或触发横向滚动——这不是 bug，是设计选择。
- 优先级顺序：先用
flex-shrink锁定图片项不被压缩，再用object-fit控制内部填充方式 -
object-fit: contain适合图标/Logo，保留空白；object-fit: cover适合照片，裁剪保比例 - 兼容性提醒：IE 不支持
object-fit，但flex-shrink: 0在 IE10+ 有效（需-ms-flex-negative: 0）
移动端 Safari 下图片忽大忽小，是不是 flex-shrink 搞的鬼？
大概率是——Safari 对 img 的默认 flex-basis 计算有偏差，尤其在 vh/vmax 单位或动态字体加载后重排时。
容易踩的坑：以为加了 width: 100% 就万事大吉，结果 Safari 把 100% 解析成“父容器当前宽度”，而父容器宽度又受 Flex 收缩影响，形成循环依赖。
- 最简修复：
img { flex-shrink: 0; width: 100%; height: auto; max-width: 100%; } - 如果用了
rem或vw做图片尺寸，务必配合flex-basis显式声明，比如flex-basis: 12rem - 别依赖
resize: both或 JS 测量来修——这是把布局问题拖进运行时，治标不治本
flex-shrink: 0，而是意识到 Flex 布局里「尺寸控制权」其实在父容器和弹性项目之间来回跳，图片只是被动参与者。 
