object-fit: cover加了仍变形，是因为图片盒子被flex默认flex-shrink:1压缩，导致裁剪基准失真；必须同步设flex-shrink:0（或flex:0 0 auto）并配合width与aspect-ratio或height约束尺寸。
直接加 object-fit 不行，必须同步控制图片容器尺寸和 flex 项的伸缩行为，否则 cover 会裁错、contain 会留白失控、甚至图片直接塌成一条线。
为什么 object-fit: cover 加了还是变形
根本不是 object-fit 失效，而是图片盒子本身被 flex 压缩了——img 默认 flex-shrink: 1，主轴方向（比如宽度）被强制收窄，object-fit 只能在扭曲的框里裁图。
- 检查 computed 样式：如果
img的实际渲染宽度远小于原始尺寸，说明它已被压缩，object-fit失去作用基准 - 错误写法：
img { width: 100%; height: 200px; object-fit: cover; }—— 没关flex-shrink，容器一窄，图片就跟着窄 - 正确组合：
img { width: 100%; height: 200px; object-fit: cover; flex-shrink: 0; }或更稳妥的flex: 0 0 auto;
object-fit 配合 aspect-ratio 实现响应式等比缩放
固定高度（如 height: 200px）在响应式场景下不灵活，aspect-ratio 是现代解法，但必须和 object-fit 协同生效。
- 生效前提：图片需有明确宽度来源（如
width: 100%），aspect-ratio才能推导出高度 - 推荐写法：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; flex-shrink: 0; } - 兼容旧 Safari（max-width: 100%; height: auto; +
flex: 0 0 auto;，再配合父容器设min-height锚定 - 慎用
flex-basis: 100%：它按父容器宽度计算，若父容器高度未约束，aspect-ratio可能被忽略
嵌套 Flex 中图片突然变细或消失
多层 flex 嵌套（如卡片组件塞进网格布局）时，图片可能被压成像素级细线，或加载后闪动错位——这不是 object-fit 问题，是 min-width: auto 的默认限制在作祟。
立即学习“前端免费学习笔记（深入）”；
- 替换元素（如
img）默认min-width: auto，拒绝缩到比固有尺寸更小，导致 flex 布局僵死 - 解决方案：在图片自身或其**直接父容器**上加
min-width: 0;，告诉 flex：“这玩意儿可以缩到 0” - 典型组合：
.card-img { min-width: 0; } .card-img img { width: 100%; height: auto; object-fit: cover; flex: 0 0 auto; } - 别只加
min-width: 0就完事——如果没配flex-shrink: 0或flex: 0 0 auto，图片仍可能被拉伸后又被压缩，结果更混乱
最易被忽略的是三层耦合：flex 容器尺寸 → 图片容器尺寸 → object-fit 作用域。断掉任意一环，比例就失守；尤其是 flex-shrink: 0 和 min-width: 0 看似无关，实则一个管“不许压”，一个管“允许缩”，缺一不可。
