object-fit 是解决响应式图片拉伸/裁剪问题的核心方案，需配合 object-position 精准控制裁剪锚点，并通过 background-image 或 JS 降级兼容 IE。
图片在响应式布局中被拉伸或显示不全
这是 object-fit 最典型的应用场景：容器尺寸随屏幕变化，但图片原始宽高比固定，导致默认的 img 行为（等比缩放后居中，多余部分溢出裁剪）和容器实际需求不一致。浏览器默认是 object-fit: fill（严格拉伸填满），不是你想要的“保持比例+可控裁剪”。
- 确认父容器设置了明确的
width和height（或aspect-ratio），否则object-fit无作用对象 - 避免对
img同时设置width: 100%+height: 100%，这会强制拉伸，覆盖object-fit效果 - 优先用
object-fit: cover实现“等比缩放 → 裁剪填满”，适合封面图、头像等强调视觉完整性场景
object-fit: cover 裁剪位置偏移，关键内容被切掉
object-fit: cover 默认从图片中心裁剪，但很多图片主体（如人脸、logo）不在正中心。这时必须配合 object-position 手动调整锚点。
-
object-position语法同background-position，支持left/top/50%/20px等值 - 常见组合：
object-fit: cover; object-position: center top;（顶部对齐，保留下方内容） - 调试技巧：临时加
border: 1px solid red到img上，看清裁剪边界与内容相对位置
IE 浏览器不支持 object-fit 导致布局崩塌
object-fit 在 IE 中完全不支持，若需兼容，必须提供降级方案。不能只靠 CSS，得结合 HTML 结构或 JS 补救。
- 最稳妥的降级：用
background-image替代img标签，利用background-size: cover+background-position实现相同效果（注意语义化损失） - JS 检测补丁：用
if ('objectFit' in document.documentElement.style) {...}判断，对不支持的环境动态插入 wrapper div 并用绝对定位模拟裁剪 - 不要依赖 autoprefixer —— 它无法为
object-fit生成有效前缀，IE 就是彻底不认
/* 示例：安全的响应式图片容器（含 IE 降级） */
.responsive-img {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #f0f0f0;
}
.responsive-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* IE 专用样式（通过条件注释或 JS 添加 class） */
.ie .responsive-img {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.ie .responsive-img img {
display: none;
}关键点在于：裁剪逻辑必须和容器尺寸绑定，而不仅是图片本身；object-position 不是可选项，是控制裁剪结果的必要调节手段；兼容性问题无法靠 CSS 单独解决，结构或脚本层面必须介入。
立即学习“前端免费学习笔记（深入）”；
