只写 flex-shrink: 0 无效，因未定义尺寸起点；需配合 flex-basis 和 width/height: auto，并在嵌套 flex 中设 min-width: 0 确保外框稳定，再用 object-fit 控制裁剪。
为什么只写 flex-shrink: 0 没用
浏览器看到 flex-shrink: 0 确实会跳过收缩计算，但它不定义尺寸起点。若没配 flex-basis，默认回退到 flex-basis: 0，图片直接坍缩成一条线；若写了 flex-basis: 100%，又可能按父容器宽度拉伸——尤其父容器高度没约束时，纵向照样塌陷。
-
flex: 0 0 auto是最稳的等价写法，明确禁用伸缩、锚定图片固有尺寸（intrinsic size） - 必须同步声明
width: auto和height: auto，否则 CSS 重置或框架样式可能覆盖原始比例 - 在
flex-direction: column容器里，flex-basis控制的是高度，此时得检查max-height和object-fit是否配合到位
object-fit 为什么看起来没生效
object-fit 不是开关，它只在图片已有稳定外框时才起作用。如果 img 已被 flex-shrink: 1 压成窄条，object-fit: cover 只能在扭曲画布上裁图，毫无意义。
- 先确保外框稳定：
flex: 0 0 auto; width: auto; height: auto; - 再加
object-fit: cover（填满裁剪）或object-fit: contain（完整显示） - 别写
width: 100%; height: 100%——这是强制拉伸，直接破坏比例 - IE 不支持
object-fit，需 fallback 到background-image+background-size
嵌套 Flex 中图片变成细长竖线
多层 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 动态加载时占位尺寸为 0，加载后突然撑开触发重排——光靠 CSS 不够，得预设
aspect-ratio或占位容器
移动端和框架场景下的隐藏陷阱
移动端问题往往是几个默认行为叠加：父容器用了 position: fixed 或 max-width: 100% → 宽度受限；子项没设 flex-shrink: 0 → 默认 1 开始压缩；图片没配 max-width: 100% + height: auto → 外框失守，object-fit 失效。
- 优先用
aspect-ratio: 16 / 9（Chrome 88+、Safari 15.4+），比 padding-top hack 更干净 - 旧 Safari 兼容 fallback：
max-width: 100%; height: auto;+flex: 0 0 auto - SSR 首屏渲染中图片占位为 0，需用
loading="lazy"配合decoding="async"减少重排 - 真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**——这些会让
flex-shrink: 0的作用范围变模糊，得逐层检查 computed 样式确认生效节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
