object-fit和object-position在IE全系均不被解析，等同于未声明；需用background-image+background-size:cover+background-position替代，或用JS手动模拟，但存在缩放基准、浮点精度等兼容陷阱。
object-fit 在旧版 IE（包括 IE11）中根本不会被解析——不是“对齐不准”，是整条声明被 CSS 解析器跳过，等同于没写。你看到的图片左上角贴边、拉伸变形、裁切错位，全是浏览器按默认 object-fit: fill 渲染的结果，和 object-position 完全无关。
object-position 为什么在 IE 里完全不生效
-
object-position是个“依赖型属性”：它只在object-fit被激活（且值为cover、contain等非fill值）时才起作用 - IE 全系连
object-fit都不认识，自然也无视object-position，哪怕你写了object-position: 50% 50%或20px 30px，它连解析都不解析 - 控制台不会报错，DOM 里样式照常存在，但 computed style 中查不到生效值，行为就是“原始尺寸+左上角对齐”
用 background-position + background-size: cover 替代的实操要点
这个方案不依赖 JS，IE9+ 全支持，但必须接受放弃 <img> 标签：
- HTML 必须从
<img src="a.jpg">改成<div class="img-cover" style="background-image: url('a.jpg')"></div> - CSS 中必须同时写：
background-size: cover;<br>background-position: 50% 50%;<br>background-repeat: no-repeat;
- 容器必须有明确宽高（不能靠内容撑开），否则背景图不显示；若需响应式，得用
padding-top百分比 hack 撑高，因为 IE 不支持aspect-ratio -
background-position: center center在 IE11 下解析不稳定，务必写成50% 50% - 若原设计用了像素偏移（如
object-position: 20px 30px），对应背景写法是background-position: calc(100% - 20px) calc(100% - 30px)，IE8 需兜底为999px 999px
用 JS 手动模拟 object-fit: cover + object-position 的关键陷阱
如果你必须保留 <img>（比如要 alt、SEO、右键保存），就得靠 JS 计算缩放与偏移：
- 缩放比必须基于
img.naturalWidth/img.naturalHeight，不能用offsetWidth——图片未加载完时后者为 0 - IE10+ 需加
-ms-transform前缀，且transform-origin必须设为center，否则translate基准点错位 -
object-position的百分比值（如75% 25%）可转为像素偏移：const x = (containerWidth - img.naturalWidth * scale) / 2 + (75/100) * (img.naturalWidth * scale - containerWidth);
- 动态插入的图片、
srcset切换、picture元素，插件（如object-fit-images）默认不处理，需手动监听load并重调
真正麻烦的不是“怎么让图片填满”，而是“填满之后哪块被切掉”——IE 没有标准裁剪逻辑，不同版本对 background-size: cover 的溢出取舍、对 transform: scale() 的浮点精度处理都有差异，最终效果只能靠真机预览校正。
立即学习“前端免费学习笔记（深入）”；
