object-fit必须与可计算的容器尺寸绑定才生效，否则因无明确宽高约束而失效；需确保img或其父容器有确定width/height，Flex中尤需设min-height或aspect-ratio，并注意iOS Safari 13.3前需-webkit前缀。
只加 object-fit 属性根本防不住拉伸——它必须和可计算的容器尺寸绑定才生效，否则浏览器连“往多大框里放图”都算不出来。
为什么加了 object-fit: cover 还是拉伸？
这不是属性写错了，而是浏览器压根没“盒子”可填：img 没设 height，父容器又靠内容撑高，导致渲染时宽高比失控。常见表现：
- DevTools 里
img的实际高度显示为0或远小于预期 → 父容器塌陷 - Flex 容器中只写
width: 100%，没设min-height或aspect-ratio→align-items: stretch强制拉高 - 用了
float但没清除 →img脱离文档流，父容器高度为0 - iOS Safari 13.3 之前漏写
-webkit-object-fit前缀 → 属性被静默忽略
必须配的三要素：宽高基准 + 显式尺寸 + 视觉兜底
object-fit 不是自动适配工具，它是“在已有盒子里怎么摆图”的指令。缺一不可：
- 容器要有可推导的宽高比例：优先用
aspect-ratio: 16 / 9（iOS 15+/Android Chrome 稳定），fallback 用padding-bottom: 56.25%+position: relative -
img必须设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内间隙 - 用
object-fit: cover时，父容器一定要加overflow: hidden，否则裁剪部分会溢出破坏布局
cover 和 contain 到底怎么选？
这不是“哪个好看”，而是“内容是否允许裁剪”：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后填满容器，边缘裁剪 → 适合轮播封面、头像、卡片图；必须配object-position控制锚点（如人脸偏上就写object-position: center top） -
object-fit: contain：等比缩放后完整居中显示，四周留白 → 适合证件照、产品主图、图标；此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill就是默认行为，强制拉伸，慎用；scale-down只在图片大于容器时生效，小图原样显示，不适合强约束场景
移动端真机测试最容易忽略的点
Can I Use 标记“支持” ≠ 实际可用，尤其在低端安卓 WebView 和 iOS 旧版 Safari 上：
- iOS 横屏切换时容器宽高比突变，
cover可能让一张400×300的图缩成图标大小，得用媒体查询兜底 - Safari ≤13.3 完全不支持
object-fit在img上生效，加前缀也无效，会退化为fill（即拉伸） - 别依赖
max-width: 100%+height: auto和object-fit共存——Safari 旧版会触发重算异常，表现不稳定
真正卡住效果的，从来不是 object-fit 写在哪一行，而是容器有没有一个浏览器能算出来的“框”。没这个框，所有值都形同虚设。
