flex-shrink: 0 加了仍变形，是因为未配合 flex-basis 或 width: auto，导致浏览器 fallback 到不可控的固有尺寸；需同时设 width: auto、height: auto 和 min-width: 0，并确保外框稳定后再用 object-fit 控制内容填充。
flex-shrink: 0 为什么加了还是变形？
因为 flex-shrink: 0 只是关掉了收缩开关，但浏览器仍需一个“初始尺寸”来渲染图片。如果没设 flex-basis 或显式 width，它会 fallback 到 width: auto——而 auto 在 Flex 中常被解析为内容固有宽（比如 800px），一旦父容器更窄，即使不收缩，也可能溢出或触发横向滚动；更糟的是，某些浏览器会把 width: auto 和 flex-shrink: 0 一起忽略，导致压缩照旧。
真正起效的前提是：图片盒模型的宽度基准必须明确且可控。
-
img { flex-shrink: 0; width: auto; height: auto; }—— 最基础保比例写法 - 若父容器宽度受限，再补
max-width: 100%防溢出 - 别写
width: 100%，它会覆盖flex-basis，让flex-shrink: 0失效
min-width: 0 是干什么用的？
它不是为了“设最小宽度”，而是告诉 Flex 引擎：“这个元素可以安全地收缩到 0，别按图片原始尺寸卡住计算”。很多情况下，flex-shrink: 0 看似没生效，其实是被 min-width: auto 拦住了——这是图片作为替换元素的默认行为。
- 对
img加min-width: 0，能解除隐性约束，让flex-shrink: 0真正落地 - 在嵌套 Flex 或复杂布局中，漏掉这句常导致图片突然变细长、高度塌陷甚至消失
- 兼容写法可扩展为
min-width: 0; min-height: 0，尤其当父容器是flex-direction: column时
object-fit 和 flex-shrink 谁先谁后？
object-fit 不解决外框变形，只管“图怎么填进框里”；flex-shrink 才决定“框自己缩不缩”。两者不在同一层，不能互换顺序，也不能互相替代。
- 先确保外框尺寸稳定：
flex-shrink: 0+width: auto+height: auto - 再控制内容填充：
object-fit: cover（裁切居中）或object-fit: contain（等比留白） - 若直接给
img写object-fit却没锁外框，你会看到“一张被拉扁的图，里面还被 cover 裁了一半”
IE 兼容和现代写法怎么平衡？
IE10+ 支持 flex-shrink: 0，但需要加前缀 -ms-flex-negative: 0；而 object-fit 在 IE 完全不支持。所以真要兼容 IE，得放弃 object-fit，改用包裹层方案。
- 推荐结构：
<div style="flex-shrink: 0; width: 80px; height: 80px;"><img src="x.jpg" style="max-width:90%"></div> - 这样既绕过 IE 的
object-fit缺失，又靠父容器尺寸锁定比例 - 注意：包裹层必须设明确宽高（或
aspect-ratio），否则width: 100%无参照
最易被忽略的点：不是所有场景都该禁用收缩。如果图片在窄屏下必须退为图标，flex-shrink: 0 反而会撑破布局。关键在判断——你到底要“保持比例”，还是“强制不缩”。前者靠组合规则，后者才是单纯锁死 flex-shrink。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
