object-fit: fill会强制拉伸变形，应改用cover（裁剪填满）、contain（完整留白）或scale-down（安全兜底）；cover需配object-position微调焦点，且容器必须有明确宽高比或尺寸约束。
object-fit 值选错会导致图片变形或留白失控
最常见的误用是把 object-fit: fill 当成“自适应”——它确实填满容器，但会强制拉伸，完全无视原始宽高比。比如轮播图里一张人像竖图被压成宽脸，就是这个值惹的祸。
真正可控的选项只有三个：contain、cover、scale-down。其中 cover 最常用，但要注意：它一定裁剪，且默认从中心裁；contain 保证完整，但容器高度固定时容易上下留白；scale-down 是安全兜底，等效于 “none 和 contain 中取更小的那个”，适合不确定图源尺寸的场景。
- 固定卡片高度 + 图片必须填满 → 用
cover，再配object-position调焦点 - 图库列表 + 所有图必须完整可见 → 用
contain，容器加background-color避免白边突兀 - 用户上传头像 + 尺寸不可控 → 用
scale-down，比none更稳妥
object-position 不写单位或写错顺序就失效
object-position 的语法和 background-position 一致，但很多人写成 object-position: 50% 50% 没问题，换成 object-position: center top 就失灵——其实不是失效，是浏览器解析优先级导致行为不一致。实际生效最稳的是双数值写法，且必须带单位（% 或 px）。
典型错误：
- 漏单位：
object-position: 20 30→ 不解析，回退到默认center center - 顺序反了：
object-position: top center→ 部分旧版 Chrome 会忽略 - 用关键词混搭数值：
object-position: left 10%→ Safari 15.6 之前不支持
建议统一用 object-position: 20% 30%，移动端人脸居中可设为 object-position: 50% 30%（抬高焦点，避免切掉头顶）。
固定宽高比容器 + object-fit 导致 CLS（布局偏移）
如果只写 width: 100%; height: 200px;，图片加载前容器高度塌陷，加载后突然撑开，触发 CLS。这不是 object-fit 的锅，而是缺少占位机制。
真正有效的解法是组合使用：
- 用
aspect-ratio: 16 / 9替代固定height，现代浏览器原生支持 - 降级方案：用伪元素撑开容器高度，例如
::before { padding-top: 56.25%; }（对应 16:9） - 配合
img { height: 100%; width: 100%; object-fit: cover; }，确保内容填满且不抖动
注意：aspect-ratio 在 Firefox 89+、Chrome 88+、Safari 15.4+ 支持，IE 和旧 Android WebView 需 fallback。
旧浏览器兼容不能只靠 polyfill
市面上的 object-fit polyfill（如 object-fit-images）本质是 JS 计算后重设 background-image，但它会让 <img> 失去语义、SEO 和懒加载能力。真要兼容 IE11 或 Android 4.4，得换思路。
- 服务端生成多尺寸图 +
srcset+sizes，前端用max-width: 100%; height: auto;保比例 - 纯前端 fallback：用
background-image模拟cover，但必须加aria-hidden="true"并保留原<img>作语义后备 - 关键业务图（如商品主图）直接禁止
object-fit，走服务端裁剪 API，前端只负责展示
最常被忽略的一点：polyfill 无法修复 object-position 的定位精度问题，JS 计算像素偏移在高 DPR 屏上误差明显，此时必须用服务端方案兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
