<p>object-fit 本身不防止拉伸，需容器有明确尺寸才能生效；常见失效因父容器无高、无宽、无宽高比；cover 适合裁剪填满，contain 适合等比留白；iOS Safari 13.3- 需用 background-image 或 polyfill 降级。</p>
object-fit 本身不防止拉伸变形，它只决定“图怎么塞进已有尺寸的盒子里”——盒子不存在，它就完全不工作。加了 object-fit: cover 还是拉伸，90% 的原因是容器没锁高、没定比、没尺寸基准。
为什么写了 object-fit 还是拉伸？
浏览器根本没“框”可填。常见失效场景：
-
img只设了width: 100%，但height: auto或未声明 → 图片按原始尺寸撑开父容器 - 父容器是
display: flex，子项没设min-height或aspect-ratio，加载中高度塌陷为 0 - 用了
float但没清除，父容器高度为 0，img实际脱离文档流渲染 - Bootstrap 的
img-fluid带height: auto，和object-fit: cover冲突，必须显式覆盖
让 object-fit 真正生效的三要素
缺一不可：
- 容器（
img自身或其父元素）要有可计算的尺寸：推荐aspect-ratio: 16 / 9+width: 100%；老浏览器 fallback 用padding-bottom: 56.25%+position: relative -
img需设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内基线间隙 - 父容器记得加
overflow: hidden，否则cover裁剪部分可能溢出边框
cover 和 contain 到底怎么选？
这不是视觉偏好，而是内容语义决定的：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合卡片图、轮播封面、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top或20% 30%微调焦点 -
object-fit: contain：等比缩放后完整显示，留白补足 → 适合证件照、产品主图、图标。此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill：强制拉伸填满 → 会变形，除非刻意做故障效果，否则一律避免
iOS Safari 13.3 及更早版本怎么兼容？
这些版本完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit: cover 也无效，会退化成 fill 行为（即拉伸）。
- 稳妥降级方案：用
background-image+background-size: cover，但失去img的语义化、alt和原生懒加载 - 条件加载 polyfill（如
object-fit-images），仅在检测到不支持时动态注入 - 对关键场景（如头像）做服务端裁剪，返回固定比例图片，规避前端适配问题
真正容易被忽略的点是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你算。
