ie全系完全不支持object-fit，解析器直接跳过该声明，图片默认按fill拉伸；可用object-fit-images插件或background-size:cover降级，但需注意初始化时机、结构约束及裁剪一致性问题。
IE 全系压根不解析 object-fit，不是“失效”，是“无视”
你写的 object-fit: cover 在 IE（包括 IE11）里不会报错，也不会部分生效——CSS 解析器直接跳过整条声明，等同于没写。图片退回到默认行为 object-fit: fill，也就是强制拉伸变形。这不是兼容性“差”，而是引擎级缺失：IE 的渲染内核从未实现该属性。所以调试时看到拉伸，别查语法或优先级，先确认浏览器环境。
用 object-fit-images 插件时，初始化时机和结构约束缺一不可
这个轻量插件（约 3KB）在检测到不支持时才注入裁剪逻辑，但极易因结构或时机问题静默失败：
- 必须先引入
object-fit-images.min.js，再在DOMContentLoaded或window.onload中调用objectFitImages() - CSS 中必须已声明
object-fit: cover和object-position: 50% 50%，插件靠读取这些样式值来模拟行为 - 父容器需设
position: relative，否则生成的position: absolute裁剪层会脱离定位上下文 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片建议提前加固定height占位 - Vue/React 动态插入的
<img>需手动再次调用objectFitImages()
background-size: cover 是最稳的纯 CSS 降级，但语义和响应式有硬限制
它在 IE9+ 完全支持，裁剪逻辑与 object-fit: cover 一致，但代价明确：
- 必须把
<img src="...">改为<div style="max-width:90%"></div>，丢失alt、SEO 和原生loading="lazy" - 容器必须有明确宽高，
aspect-ratio在 IE 中无效；响应式高度得用padding-top百分比 hack（如父容器position: relative，子div设padding-top: 56.25%+position: absolute） -
background-position: center center在 IE11 下不稳定，必须写成background-position: 50% 50% - 显式声明
background-repeat: no-repeat，否则 IE 可能平铺
真正麻烦的不是“怎么填满”，是“哪部分被切掉”
background-size: cover 和 object-fit-images 都无法保证裁剪起点与现代浏览器完全一致。尤其当容器宽高比与图片差异大时（比如竖版人像放进横版卡片），IE 中的视觉焦点容易偏移——理论值 object-position: 50% 50% 在 IE 里可能切掉半张脸。这时候不能只看文档，必须在真实 IE 环境下预览，微调为 47% 53% 这类非对称值。单位也只推荐用 % 或 px，em/rem 在 IE 中计算不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
