flex-shrink: 0 必须配合 flex-basis 才生效，单独使用会导致图片坍缩；最稳妥写法是 flex: 0 0 auto，结合 min-width: 0、object-fit: cover 及预设宽高比保障响应式稳定性。
flex-shrink: 0 必须配 flex-basis 才生效
只写 flex-shrink: 0 很可能没用——浏览器会回退到 flex-basis: 0，图片直接坍缩成一条线。关键不是“关掉收缩”，而是明确告诉浏览器“按什么尺寸起步”。
-
flex: 0 0 auto是最稳的写法，等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，让图片按固有尺寸（intrinsic size）作为基准 - 避免
flex-basis: 100%：它按父容器宽度算，若父容器高度没约束，图片纵向仍会塌陷 - 如果父容器是
flex-direction: column，flex-basis控制的是高度，此时得同步检查max-height和object-fit的配合方式
object-fit 不是万能胶，先得有稳定外框
object-fit: cover 再管用，也得有个没被 Flex 压扁的盒子。如果 img 本身已被 flex-shrink: 1 挤成窄条，object-fit 只能在扭曲的画布上裁图。
- 必须组合使用：
flex: 0 0 auto; width: auto; height: auto; object-fit: cover; - 别写
width: 100%; height: 100%：这是强制拉伸，直接破坏比例 - 在
align-items: stretch的容器里，若设了固定高度，object-fit才有作用空间；否则图片可能被垂直撑开，flex-shrink: 0也救不了
嵌套 Flex 中图片消失或细长，查 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 里动态加载图片、懒加载、SSR 首屏渲染，会让占位尺寸为 0，加载后突然撑开触发重排。这时候光靠 CSS 规则不够，得预设结构稳定性。
- 优先用
aspect-ratio: 16 / 9（Chrome 88+、Safari 15.4+），比padding-tophack 更干净 - 旧 Safari 兼容 fallback：用
max-width: 100%; height: auto;+flex: 0 0 auto - IE 完全不支持
object-fit，必须用background-image+background-size替代，同时补-ms-flex-negative: 0支持flex-shrink
flex-shrink: 0 的作用范围变得模糊，得逐层看 computed 样式才能定位生效节点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
