只加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，而默认的 align-items: stretch 又在交叉轴上强行撑满高度。必须组合控制外框尺寸、收缩行为和内容填充逻辑。
为什么 flex-shrink: 0 单独写无效
它只是禁用了收缩，但没指定起点尺寸。浏览器找不到基准，就按 flex-basis: 0 计算，图片直接坍缩成一条竖线（尤其在窄容器或嵌套 Flex 中更明显）。flex: 0 0 auto 才是等价且安全的写法：第一个 0 禁用放大，第二个 0 禁用收缩，auto 明确以图片固有尺寸为基准。
常见错误现象：
- DevTools 里看到
flex-shrink是0，但图片渲染宽度仍是2px - 父容器宽度变化时，图片忽大忽小甚至消失
- 写了
flex-shrink: 0还加了width: 100%，结果图片被拉伸失真
align-items: stretch 是垂直拉伸的元凶
Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 img）强行撑满容器高度。哪怕图片原始高只有 50px，也会被拉成 200px——这不是图片出错，是 Flex 的默认行为。
立即学习“前端免费学习笔记（深入）”；
解决方法很简单：
- 主轴为水平方向时，设
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 尺寸） - 再加
object-fit: cover（填满裁剪）或contain（完整显示） - IE 完全不支持
object-fit，需 fallback 到background-image+background-size
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都会让 flex-shrink: 0 的作用范围变得模糊，得逐层看 computed styles 才能定位生效节点。
