关键不是height: 100%，而是切断flex-shrink并提供稳定尺寸上下文；因height: 100%需父容器有确定高度，否则计算为0致塌陷，且强制拉伸破坏宽高比。
图片在 Flex 容器里自适应高度，关键不是靠 height: 100%，而是切断 flex-shrink 并给 object-fit 一个稳定的尺寸上下文。
为什么 height: 100% 会让图片变形
直接给 img 设 height: 100% 会强制拉伸，破坏原始宽高比；若父容器高度未显式定义（比如只靠 flex: 1），height: 100% 还可能计算为 0，导致图片塌陷或消失。Flex 不会自动把“剩余空间”转成子项的百分比高度，它只按 flex-basis 和收缩/增长规则分配。
-
height: 100%必须依赖父级有确定高度（如min-height: 300px或flex-basis: 300px），否则无效 - 即使父容器有高度，
width: 100%; height: 100%组合仍会强制拉伸，object-fit只能裁剪，不能恢复比例 - 常见现象：图片被压成一条线，或加载后突然跳变——多因 height 计算不稳定触发重排
flex: 0 0 auto 是防止压缩的最小安全写法
这是让图片“守着自己固有尺寸、不被 Flex 主轴挤压”的最简可靠方案。它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，其中 flex-basis: auto 表示以图片原始宽高为基准，不受父容器宽度强行拉扯。
- 别用
flex-shrink: 0单独写，没配flex-basis时浏览器行为不一致（尤其 Safari） - 避免
flex: 0 0 100%：100% 按父容器宽度算，若父容器高度未约束，图片纵向仍可能塌陷 - 响应式场景下，可配合
max-width: 100%+height: auto，再加flex: 0 0 auto防止嵌套 Flex 压缩
要自适应高度，得靠 min-height 或 aspect-ratio 锚定容器
图片自身不生成高度，它的高度必须由父容器提供。如果目标是“图片随容器宽度变化、自动保持 4:3”，就不能只靠 object-fit，而要让容器先有可推导的高度。
- 现代方案（Chrome 88+ / Safari 15.4+）：
aspect-ratio: 4 / 3; width: 100%; object-fit: cover; - 兼容方案：父容器设
padding-top: 75%（4:3 对应 75%）+position: relative，img绝对定位并设width: 100%; height: 100%; object-fit: cover; - 全屏主图场景：图片父容器设
flex: 1; min-height: 0（防嵌套 Flex 僵死），img设max-width: 100%; max-height: 100%; object-fit: contain;
min-width: 0 是嵌套 Flex 中图片突然消失的解药
多层 Flex 嵌套（如卡片 → 网格 → 图片区）时，图片常被压成像素级细线或加载后错位。这不是 object-fit 失效，而是 flex 默认 min-width: auto 拒绝把替换元素缩太小，导致布局卡死。
- 在图片本身或其**直接父容器**上加
min-width: 0，明确告诉 Flex：“这东西可以缩到 0” - 典型组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 若用了
object-fit: cover却发现裁剪区域偏移，大概率是min-width: 0漏了，或父容器没设overflow: hidden
真正难的不是写对一行 object-fit，而是判断当前图片处在哪一层 Flex 上下文中、它的高度来源是否可靠、以及是否被某层默认的 min-width 或 flex-shrink 暗中锁死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
