单设flex-shrink:0无效，因它仅禁收缩却不定义尺寸起点；必须协同flex:0 0 auto锚定固有尺寸、width:auto/height:auto保比例、min-width:0解嵌套压缩限制。
不能靠单设 flex-shrink: 0 防止图片缩小——它只禁用收缩，但若没配 flex-basis 和 width/height，图片会坍缩成一条线或被父容器强行拉伸。真正起效的是三者协同：切断收缩路径、锚定尺寸起点、释放固有比例。
为什么 flex-shrink: 0 单独写无效
浏览器看到 flex-shrink: 0 确实跳过收缩计算，但它不定义尺寸起点。漏掉 flex-basis 时，默认回退到 flex-basis: 0，<img> 直接坍缩；写了 flex-basis: 100% 又可能按父宽拉伸，高度照样塌陷。
-
flex: 0 0 auto是最稳的等价写法，明确禁用伸缩、锚定图片固有尺寸（intrinsic size） - 必须同步声明
width: auto和height: auto，否则 CSS 重置或框架样式（如 Tailwind Preflight）可能覆盖原始比例 - 在
flex-direction: column容器里，flex-basis控制的是高度，此时得检查max-height和object-fit是否配合到位
flex: 0 0 auto 必须搭配 min-width: 0 的场景
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，图片常被压成细长竖线或加载后闪动错位。这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。
- 在
<img>或其**直接父容器**上加min-width: 0，告诉 Flex：“这玩意儿可以缩到 0” - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 用 DevTools 检查 computed styles，确认
flex-shrink确实为0，且父元素display真的是flex
动态加载时图片突然撑开怎么办
React/Vue 中光靠 CSS 不够，初始占位尺寸为 0，加载后突然撑开会触发重排，flex-shrink: 0 也救不了。
- 优先用
aspect-ratio: 16 / 9（Chrome 88+、Safari 15.4+），比 padding-top hack 更干净 - 旧 Safari 兼容 fallback：
max-width: 100%; height: auto;+flex: 0 0 auto+min-width: 0 - IE 完全不支持
object-fit，必须用background-image+background-size替代，同时补-ms-flex-negative: 0
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都会让 flex-shrink: 0 的作用范围变得模糊，得逐层看 computed 样式才能定位生效节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
