IE11完全不支持object-fit和object-position属性，会直接忽略相关CSS规则而回退到object-fit: fill；推荐用background-size: cover等背景方案替代，但需改HTML结构并注意兼容细节。
IE11根本不解析object-fit和object-position
这不是“效果不准”或“部分兼容”，而是 IE11 的 CSS 引擎压根没实现这两个属性。只要写了object-fit: cover或object-position: 50% 50%，IE11 就像没看见一样，直接跳过整条规则，退回到默认的object-fit: fill行为——也就是强行拉伸图片填满容器，导致变形、模糊、左上对齐。你调样式、改值、加!important都没用，因为浏览器根本没读那行 CSS。
用background-size: cover替代必须改 HTML 结构
这是最稳、零 JS、兼容 IE9+ 的纯 CSS 方案，但代价是放弃<img>标签：
- 把
<img src="xxx.jpg">换成<div style="background-image: url(xxx.jpg)"></div>，语义、alt、SEO、右键保存全丢失 - 容器必须有明确宽高，比如
width: 300px; height: 200px；aspect-ratio在 IE 中无效，不能靠内容撑开 - CSS 必须同时写三句：
background-size: cover、background-position: 50% 50%（别用center center，IE11 下不稳定）、background-repeat: no-repeat - 如需响应式高度，得用
padding-top百分比 hack：父容器设position: relative，子<div>设padding-top: 56.25%+position: absolute+top: 0; left: 0; width: 100%; height: 100%
object-fit-images插件生效有三个硬性前提
它只在检测到不支持时才激活，模拟原生行为，但极易因时机错位失效：
- 必须在
DOMContentLoaded或window.onload后调用objectFitImages()，否则找不到<img>元素 - CSS 中必须已声明
object-fit: cover（哪怕只写在全局样式里），插件才读取并生效；Vue/React 动态插入的<img>需手动再调一次 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片务必加固定height占位（如height: 200px），否则可能按0×0计算导致裁剪错位 -
object-position在插件中转为transform偏移，但 IE 对em/rem单位计算不准，只推荐用%或px
裁剪起点不一致是真机预览才能发现的问题
就算你把background-size: cover和object-fit: cover都设成居中，IE 和 Chrome 的裁剪起点也不一样。这不是 bug，是渲染引擎底层差异——尤其当容器宽高比与图片原始比例相差较大时（比如竖版人像放进 4:3 卡片），人脸或 LOGO 可能意外被切掉。理论值没用，background-position: 50% 50%只是起点，实际得在真实 IE11 环境下逐个容器预览，微调成47% 53%这类值来对齐视觉焦点。
立即学习“前端免费学习笔记（深入）”；
