object-fit在IE全系及iOS Safari 9–10.0中不支持或存在bug；仅对img、video等替换元素生效，不可作用于父容器；推荐用object-fit-images polyfill或background-image降级。
object-fit 在哪些浏览器里直接失效
Chrome 32+、Firefox 36+、Safari 10.1+ 和 Edge 16+ 原生支持 object-fit；IE 全系不支持，iOS Safari 9 及更早版本也不支持。如果你的用户仍有大量 iOS 9–10.0 或 Windows 7 上 IE11（虽标称支持但存在渲染 bug），那就不能只靠 CSS。
用 object-fit 时最常踩的 DOM 结构坑
它只对替换元素（<img alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" >、<video></video>）或 display: inline-block / block 的 <div> + <code>content: url(...) 生效。常见错误是套了一层无意义的 <div> 并给它设 <code>object-fit，结果完全没反应。
- ✅ 正确：直接写在
<img alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" >标签上：<img src="..." style="max-width:90%" alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" > - ❌ 错误：写在父容器上：
<div style="object-fit: cover;"><img src="..." alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" ></div> - ⚠️ 注意：
<picture></picture>内部的<img alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" >仍需单独加object-fit，<picture></picture>本身不接受该属性
选 polyfill 还是降级方案？看你的构建链路
如果项目已用 Webpack/Vite，推荐 object-fit-images（轻量、无依赖、自动扫描）。它会在 JS 加载后遍历所有带 data-object-fit 或原生 object-fit 的 <img alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" >，用 background-image 模拟效果。
- 引入方式：
import 'object-fit-images';或通过 script 标签加载object-fit-images.min.js - 不支持
object-position的 polyfill 补全，需要手动加background-position - 若用 React/Vue，避免在组件挂载前就调用
objectFitImages()，否则可能漏掉动态插入的图片 - 纯静态页且不想加 JS？改用
background-image+background-size: cover降级，但会丢失<img alt="CSS如何实现响应式图片兼容_利用object-fit属性配合polyfill补丁" >的语义和懒加载能力
cover 和 contain 渲染差异直接影响布局稳定性
object-fit: cover 会裁剪图片以填满容器，但可能切掉关键内容；object-fit: contain 保证完整显示，但容易留白——这点在 flex/grid 容器中特别明显，因为它的尺寸计算不参与父容器的伸缩逻辑。
立即学习“前端免费学习笔记（深入）”；
- 在
display: grid中用cover，图片宽高比固定，但容器若设了min-height，图片不会拉伸超出自身原始尺寸 - 用
contain时，若父容器宽高比和图片不一致，空白区域实际是透明的，不是背景色，容易被误判为“图片没加载” - 服务端返回的图片尺寸波动大时（比如 CMS 允许上传任意比例图），建议搭配
aspect-ratio配合使用，否则容器高度塌陷
