flex-shrink: 0单独无效，因未指定尺寸起点，浏览器回退到flex-basis: 0致图片坍缩；须用flex: 0 0 auto、width: auto、height: auto、min-width: 0及align-items: flex-start，并确保img为直接flex子项。
为什么 flex-shrink: 0 单独写没用
它只禁了收缩，但没告诉浏览器“从多大开始算”。浏览器找不到基准，就回退到 flex-basis: 0，图片直接坍缩成一条竖线——尤其在窄容器或嵌套 Flex 中更明显。DevTools 里明明看到 flex-shrink 是 0，渲染宽度却只有 2px，就是这个原因。
真正起效的写法是：flex: 0 0 auto。第一个 0 禁放大，第二个 0 禁收缩，auto 明确以图片固有尺寸为起点。再配合 width: auto 和 height: auto，防止 CSS 重置样式偷偷覆盖 intrinsic 尺寸。
align-items: stretch 是垂直拉伸的元凶
Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 img）强行撑满容器高度。哪怕图片原始高是 50px，也会被拉成 200px——这不是 bug，是规范行为。
解决方法很简单：
- 主轴为水平时，加
align-items: flex-start或center即可解除垂直拉伸 - 若用了
flex-direction: column，交叉轴变成水平方向，此时要改justify-content或加min-width: 0 -
align-self只影响单个子项，但必须确保该img是直接 flex item，否则无效
嵌套 Flex 中图片变细线？查 min-width: 0
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，img 常被压成竖线或加载后闪动。这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。
解决方案是在 img 自身或其**直接父容器**上加 min-width: 0。典型安全组合如下：
img {
max-width: 100%;
height: auto;
min-width: 0;
flex: 0 0 auto;
}
注意别混用 width: 100% 和 max-width: 100%，Safari 可能触发尺寸重算异常。
object-fit 不是开关，它只在盒子稳定后才起作用
object-fit: cover 或 contain 控制的是图片内容如何填进盒子里，不是修复盒子本身。如果盒子早被 flex-shrink: 1 压成 2px 宽，object-fit 只能在扭曲画布上裁图。
前置条件必须满足：
flex: 0 0 auto-
width: auto和height: auto（防 CSS 重置覆盖 intrinsic 尺寸） -
img是直接 flex item（中间不能套div）
Safari 旧版本（iOS 13.3 及更早）还不支持 object-fit 在 img 上的声明，得用 background-image + background-size fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
