object-fit不作用于background-image，因其仅适用于替换元素（如）；背景图裁剪须用background-size:cover配合background-position和明确宽高。
object-fit 无法裁剪背景图片，因为它根本就**不作用于背景图**——只对替换元素（<img>、<video></video>、<iframe></iframe> 等）生效。
为什么 background-image 不响应 object-fit？
object-fit 是专为「替换元素」设计的 CSS 属性。浏览器把 <img> 当作一个有内在尺寸（naturalWidth/naturalHeight）的独立内容盒，才能计算缩放与裁剪。而 background-image 只是装饰性层叠效果，没有语义、没有固有尺寸、也不参与文档流布局，所以 object-fit 对它完全无感知。
你给 div 设了 background-image 再加 object-fit: cover，CSS 引擎会直接忽略这条声明——不是“失效”，而是“语法错位”，就像给 span 加 audio-controls 一样没意义。
想让背景图“cover 裁剪”，该用哪个属性？
必须用 background-size 和 background-position 组合：
-
background-size: cover：等比缩放背景图，确保完全覆盖容器，至少一维溢出 → 实现“裁剪填满” -
background-position: 50% 50%（别用center center，IE11 下不稳定）：控制裁剪起点，默认居中 -
background-repeat: no-repeat：必须显式声明，否则 IE 可能平铺 - 容器必须有明确宽高：
width和height都得写死，或用padding-top百分比 +position: relative模拟 aspect-ratio
常见误操作：混用 img 和 background-image
有人试图这样写：
.card {
background-image: url(logo.jpg);
object-fit: cover;
}
.card img {
display: none;
}
这看似“降级”，但存在两个硬伤：
-
object-fit在.card（普通块级元素）上完全无效，纯属冗余代码 - 隐藏
<img>用display: none会丢失alt文本，损害可访问性；应改用visibility: hidden或clip-path: inset(100%)
真正需要裁剪的是 img，还是背景图？
选错载体，问题就无解：
- 要语义、SEO、懒加载、alt 支持 → 必须用
<img>+object-fit+ 明确宽高约束 - 要兼容 IE11 或需精细控制裁剪起点（比如人脸始终在顶部）→ 改用
background-image+background-size: cover，并真机校验background-position - 小程序 / uni-app 环境 →
object-fit直接被忽略，必须用平台原生方案（如微信<image mode="aspectFill"></image>）
最易被忽略的一点：就算你把 background-size: cover 和 object-fit: cover 都设成 50% 50%，IE 和 Chrome 的裁剪起点仍可能偏移——这不是 bug，是渲染引擎对“等比缩放后取中心”的实现差异，尤其当容器宽高比与图片原始比例相差大时（比如竖图塞进横卡片），关键内容是否被切，只能靠真实 IE11 环境逐个预览确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
