IE 全系不支持 object-fit 和 object-position，图片默认按 fill 拉伸；可用 background-size: cover 降级（需改 img 为 div、设固定宽高、用 50% 定位）或 object-fit-images 插件模拟。
object-fit 在 IE 全系（包括 IE11）中完全不被识别——CSS 解析器直接跳过该声明，等同于没写。你看到的拉伸、变形、左上角对齐，全是浏览器按默认 object-fit: fill 渲染的结果。
IE 下 object-fit: cover 为什么完全失效
这不是“部分兼容”或“表现不准”，而是底层引擎压根没实现该属性。哪怕写了 object-fit: cover 和 object-position: center，IE 也当不存在，图片仍按 width: 100%; height: 100% 强行拉伸。更麻烦的是：object-position 同样被忽略，无法配合使用。
用 background-size: cover 替代的硬性条件
这是最稳、零 JS、行为一致的降级路径，但必须满足以下全部条件：
- 把
<img src="...">换成<div style="background-image: url(...)"></div>，语义和 SEO 能力丢失 - 容器必须有明确宽高（如
width: 300px; height: 200px），不能靠内容撑开；aspect-ratio在 IE 中无效 - 显式写
background-repeat: no-repeat，否则 IE 可能平铺 -
background-size: cover在 IE9+ 支持，但background-position: center center不稳定，改用background-position: 50% 50% - 若需响应式高度，用
padding-top百分比 hack（例如父容器position: relative，子 divpadding-top: 56.25%+position: absolute）
必须保留 <img> 标签时，用 object-fit-images 插件
它只在检测到不支持时才激活，模拟原生五种行为（fill/contain/cover/none/scale-down）和 object-position 偏移，体积约 3KB：
- 引入顺序：先载入
object-fit-images.min.js，再在DOMContentLoaded或window.onload中调用objectFitImages() - CSS 中必须已声明
object-fit: cover，插件才会读取并生效；动态插入的<img>需手动再次调用 - 图片必须加载完成才能准确获取
naturalWidth/naturalHeight；懒加载图片建议加固定height占位 -
object-position支持%和px，但em/rem在 IE 中可能计算错误 - 父容器需设
position: relative，否则生成的position: absolute裁剪层会定位错位
最容易被忽略的细节
真正麻烦的不是“怎么填满”，而是“哪部分被切掉”。IE 的 background-size: cover 裁剪起点和现代浏览器不完全一致，尤其当容器宽高比与图片差异较大时，人物脸部或关键信息可能意外偏移。必须在真实 IE 环境下预览校正，不能仅靠理论推算。
立即学习“前端免费学习笔记（深入）”；
