只写flex-shrink: 0无效，因浏览器回退到flex-basis: 0致图片坍缩；必须配合flex-basis: auto、width: auto、height: auto才能锁定固有尺寸并防止变形。
直接加 flex-shrink: 0 不管用，因为浏览器会回退到 flex-basis: 0，图片直接坍缩；必须配合 flex-basis: auto 和 width: auto、height: auto 才能锁住固有尺寸。
为什么只写 flex-shrink: 0 没效果
Flex 项默认 flex-shrink: 1，但仅设 flex-shrink: 0 并不定义起点尺寸。浏览器找不到基准，就按 flex-basis: 0 计算——图片变成一条线，尤其在窄容器或嵌套 Flex 中更明显。
-
flex: 0 0 auto是最稳的等价写法，明确禁用伸缩、锚定 intrinsic size - 别用
flex-basis: 100%：它按父宽算，若父高没约束，图片纵向照样塌陷 - 检查 computed styles，确认
flex-shrink真为0，且父元素display确实是flex
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，否则无效
object-fit 不是开关，它只在盒子稳定后才起作用
object-fit: cover 或 contain 控制的是图片内容如何填进盒子里，不是修复盒子本身。如果盒子早被 flex-shrink: 1 压成 2px 宽，object-fit 只能在扭曲画布上裁图。
- 必须前置条件：
flex: 0 0 auto; width: auto; height: auto; - 再加
object-fit: cover（填满裁剪）或contain（完整显示） - 别混用
width: 100%和max-width: 100%，Safari 可能触发尺寸重算异常 - IE 完全不支持
object-fit，需 fallback 到background-image+background-size
嵌套 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; } - React/Vue 动态加载时占位为 0，得预设
aspect-ratio: 16 / 9或用占位容器防重排
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
