object-fit: cover 无效的主因是容器缺乏宽高约束，需配合 aspect-ratio 或显式尺寸、display: block 及 object-position 精调裁剪锚点，并为 safari 13.3 及更早版本提供 background-image 回退方案。
object-fit: cover 能解决图片变形，但单独写这行几乎没用——它只管“怎么填”，不管“有没有框”。没宽高约束的容器，浏览器根本不知道该往多大里填。
为什么 object-fit: cover 加了却没效果
最常见原因是图片或其父容器缺失明确尺寸约束。浏览器默认按图片原始尺寸渲染，object-fit 无从介入。
- 只设
width: 100%不够，必须同时控制高度：比如height: 200px、aspect-ratio: 16 / 9，或父容器用padding-bottom: 56.25%+position: relative -
img自身若设了max-width: 100%但没配height: 100%（或display: block），可能因行内元素默认间隙导致高度塌陷 - Flex/Grid 容器中，
flex-shrink: 1（默认）会先压缩图片尺寸，等缩完再轮到object-fit，结果是“先压扁，再裁”
如何安全启用 object-fit: cover 的响应式写法
推荐现代方案：用 aspect-ratio 锁容器比例，object-fit 控内容填充，display: block 消除间隙。
- 给图片父容器设
aspect-ratio: 4 / 3; width: 100%（兼容性要求不高时首选） -
img上写：width: 100%; height: 100%; object-fit: cover; display: block - 若需兼容 Safari 15.2 以下，改用
background-image+background-size: cover，但要接受失去alt和懒加载 - 避免在
img上同时写width: 100%和max-width: 100%，二者冲突会导致高度计算异常
object-position 必须配 cover 一起用
默认 object-position: center center 会把图片正中心对齐容器中心，但多数重要信息不在正中——人脸偏上、Logo靠左、Banner文字在底部，不调就切掉关键部分。
-
object-position: center top：顶部对齐，保全上方内容（适合人像） -
object-position: 20% 30%：以图片横向 20%、纵向 30% 处为锚点裁剪（支持像素、百分比、关键词，但不能混用单位） - 不要写成
object-position: left top这类双关键词组合——部分旧浏览器解析不稳定，优先用0 0或20% 10% - 这个值只有在
object-fit: cover或scale-down时才有实际意义；contain下基本无效
Safari 13.3 及更早版本的兜底陷阱
iOS Safari 13.3 及更早不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，直接退化为 fill 行为（即拉伸）。这不是样式没加载，是引擎级不识别。
- 检测方案：用 JS 判断
'objectFit' in document.documentElement.style，不支持时动态替换为background-image方案 - 如果必须保留
img标签，可用<picture></picture>+<source media="(min-width: 0px)"></source>配合 JS fallback，但复杂度陡增 - 最容易被忽略的是测试环境：很多团队只测 Chrome 和最新 Safari，漏掉 iOS 13.x 真机——而国内仍有约 7% 的存量设备运行该系统（2026 年 Q1 数据）
真正卡住项目的从来不是 object-fit 写不写得对，而是容器有没有锁住比例、裁剪焦点有没有手动校准、以及老 Safari 有没有被真实覆盖到——这三处一松动，图就立刻崩形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
