flex-shrink: 0 使元素不参与主轴空间压缩计算，但需配合 flex-basis: auto、width: auto、height: auto 和 min-width: 0 才能正确保持图片固有尺寸与宽高比。
flex-shrink: 0 为什么能跳过压缩计算
它不是“让图片别缩”，而是告诉浏览器：这个元素不参与任何主轴空间分配，直接从 flex 收缩公式中剔除。Flex 布局在空间不足时，先汇总所有子项的 flex-basis + flex-shrink 加权溢出量，再按比例压缩——flex-shrink: 0 的项根本不会被纳入这个过程。
常见错误现象：父容器宽度只有 200px，<img src="big.jpg"> 却被压成一条竖线。这不是 bug，是默认 flex-shrink: 1 主动执行了压缩逻辑；加了 flex-shrink: 0 后，哪怕只剩 50px 宽，图片也维持原始宽高比（前提是其他尺寸约束到位）。
为什么只写 flex-shrink: 0 没用
flex-shrink: 0 只禁压缩，不定义起点。浏览器 fallback 到 flex-basis: 0（图片坍成线）或 flex-basis: 100%（拉伸变形），取决于上下文。
-
flex: 0 0 auto是最稳写法，等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，让图片按 intrinsic size 起步 - 必须显式加
width: auto; height: auto，防框架或重置样式覆盖固有尺寸 - 漏掉
min-width: 0会导致flex-shrink: 0白设——图片作为替换元素，默认min-width: auto会锁死最小宽度，阻断整个 flex 计算
object-fit 和 flex-shrink 的配合顺序不能反
object-fit 管的是“图怎么填进框”，flex-shrink: 0 管的是“框自己缩不缩”。两者不在同一层，无法替代。
立即学习“前端免费学习笔记（深入）”；
典型错误：只加 object-fit: cover 却没锁外框，结果是“一张被压扁的图，里面还被裁了一半”。正确顺序是：
- 确保
<img>是直接 flex item（父元素display: flex） - 加
flex: 0 0 auto; width: auto; height: auto; min-width: 0 - 再加
object-fit: cover或object-fit: contain - 绝对不要写
width: 100%; height: 100%，那是强制拉伸，直接破坏比例
嵌套 Flex 中图片变细长线，大概率缺 min-width: 0
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，外层容器若无明确宽度约束，min-width: auto 会卡住内部计算，导致 flex-shrink: 0 根本没机会生效。
真实项目里，漏掉 min-width: 0 常表现为图片加载后突然细长、闪动或消失。安全写法是加在 <img> 或其**直接父容器**上：
img {
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
max-width: 100%;
}
用 DevTools 检查 computed styles，确认 flex-shrink 确实为 0，且父元素 display 真的是 flex。
