flex-shrink: 0 并非单纯阻止图片缩小，而是让元素跳过flex收缩计算；需配合 flex-basis、width/height 和 min-width: 0 才能确保图片保持固有尺寸与宽高比。
flex-shrink: 0 是唯一能从源头跳过压缩计算的声明
它不是“让图片别缩”，而是告诉浏览器：“这个元素不参与任何空间分配，直接跳过收缩步骤”。Flex 布局在空间不足时，先算所有子项的 flex-basis + flex-shrink 加权溢出量，再按比例压缩——flex-shrink: 0 的项根本不会被纳入这个公式。移动端宽度受限（比如 max-width: 100% 或 position: fixed 容器），默认 flex-shrink: 1 的 <img> 就会首当其冲被压扁，加 flex-shrink: 0 后，哪怕父容器只剩 50px 宽，图片也维持原始宽高比（前提是其他尺寸约束到位）。
为什么只写 flex-shrink: 0 没用？必须配 flex-basis 和 width/height
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，防止某些框架或重置样式覆盖flex-basis: auto - 避免
flex-basis: 100%：它按父容器宽度算，若父容器高度未约束，图片纵向仍塌陷
min-width: 0 是隐藏开关，不加它 flex-shrink: 0 可能白设
图片作为替换元素，默认 min-width: auto，意思是“至少撑开到内容固有宽度”。在多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）中，外层容器可能因无宽度约束而塌缩，min-width: auto 就会锁死内部计算，导致 flex-shrink: 0 根本没机会生效。加 min-width: 0 是告诉 Flex 引擎：“这个元素可以安全缩到 0，别卡住布局”。真实项目里，漏掉这句常表现为图片加载后突然细长、闪动或消失。
object-fit 和 flex-shrink 必须分层配合，顺序不能反
object-fit 管的是“图怎么填进框”，flex-shrink: 0 管的是“框自己缩不缩”。如果外框已被压扁（比如 flex-shrink: 1 下图片变成 20px 宽），object-fit: cover 只能在扭曲画布上裁图，结果仍是变形。正确顺序是：
- 先用
flex: 0 0 auto; width: auto; height: auto; min-width: 0;锁住外框 - 再用
object-fit: cover;或object-fit: contain;控制内容填充 - 别写
width: 100%; height: 100%：这是强制拉伸，直接破坏比例
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都让 flex-shrink: 0 的作用范围变得模糊，得逐层检查 computed styles 确认生效节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
