直接给img加flex: 0 0 auto; width: auto; height: auto;可解决90%的flex图片变形问题，因浏览器按固有尺寸计算；单独设flex-shrink: 0无效，因未指定flex-basis导致坍缩或拉伸，而flex: 0 0 auto明确禁用伸缩并锚定原始尺寸，须配合width/height: auto防重置覆盖，且object-fit仅在外框稳定时生效。
直接给 img 加 flex: 0 0 auto; width: auto; height: auto; 就能解决 90% 的 Flex 布局下图片变形问题——不是靠猜，是浏览器按固有尺寸（intrinsic size）算出来的结果。
为什么 flex-shrink: 0 单独写没用？
设了 flex-shrink: 0 只是禁用了收缩，但没告诉浏览器“从哪开始算尺寸”。如果父容器是 flex-direction: row，而你又没配 flex-basis，浏览器默认回退到 flex-basis: 0，img 直接坍缩成一条竖线；如果写了 flex-basis: 100%，又会按父宽拉伸、高度塌陷。
-
flex: 0 0 auto是等价且安全的写法：第一个0禁用收缩，第二个0禁用放大，auto明确以图片原始尺寸为基准 - 必须同步加
width: auto和height: auto，否则某些 CSS 重置（比如 Tailwind 的 Preflight）会覆盖掉 intrinsic 尺寸 - 在
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” - React/Vue 动态加载时，初始占位尺寸为 0，加载后突然撑开会触发重排——光靠 CSS 不够，得预设结构稳定性
- 优先用
aspect-ratio: 16 / 9（Chrome 88+、Safari 15.4+），比 padding-top hack 更干净；旧 Safari fallback：max-width: 100%; height: auto; flex: 0 0 auto
真正容易被忽略的是：哪怕所有样式都写对了，只要父容器没设 display: flex 或 DevTools 里 flex-shrink 显示不是 0，问题就还在。动手前先用 DevTools 检查 computed styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
