object-fit: cover失效的根本原因是容器缺乏明确宽高约束，必须配合aspect-ratio或显式尺寸、display: block及object-position才能正确裁剪缩放；否则浏览器无参照基准，图片按原始尺寸撑开导致拉伸变形。
为什么加了 object-fit: cover 还是拉伸变形
不是属性写错了，而是浏览器压根没“框”可填——img 或其父容器缺少可计算的宽高约束。比如只写 width: 100%，没设 height、aspect-ratio，也没用 padding-bottom 模拟高度，那图片就按原始尺寸撑开容器，object-fit 根本不触发。
常见失效场景包括：
-
img上写了max-width: 100%+height: auto，和object-fit冲突，导致高度塌陷 - Flex 容器中子项未设
min-height或height: 100%，且align-items: stretch被默认继承 - 父容器用了
float但没清除，高度为 0，img实际脱离文档流渲染 - Bootstrap 的
img-fluid类含height: auto，必须显式覆盖
object-fit: cover 和 object-fit: contain 怎么选
这不是视觉偏好问题，而是内容语义决定的：
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合卡片图、轮播封面、头像。但默认object-position: center center可能切掉人脸或 Logo，必须配合object-position微调（如object-position: center top） -
object-fit: contain：等比缩放后完整显示，留白补足 → 适合证件照、产品主图、图标。此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill：强制拉伸，破坏比例 → 除非刻意做故障效果，否则一律避免
如何让 object-fit 真正生效的三要素
缺一不可：
- 容器必须有明确宽高或比例：推荐用
aspect-ratio: 4 / 3+width: 100%；老浏览器 fallback 可用padding-bottom: 75%+position: relative -
img元素需设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内间隙 - 父容器记得加
overflow: hidden，否则裁剪部分可能溢出边框
Safari 13.3 及更早版本的兼容性陷阱
iOS Safari 13.3 及之前完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，会退化成 fill 行为（即拉伸）。这不是样式加载失败，是引擎级不识别。
可行方案：
- 用
background-image+background-size: cover替代，但会丢失alt、SEO 和原生懒加载 - 用
@supports (object-fit: cover)包裹样式，再给不支持环境写降级规则 - JS 检测：
'objectFit' in document.documentElement.style，不支持时动态替换为picturefallback
最容易被跳过的是三点：容器没锁比例、忘了配 object-position、在 Safari 13 以下环境直接写 object-fit 却不兜底。这些地方一松动，图片就立刻崩形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
