IE11不支持object-fit和object-position属性，会直接忽略并退回到object-fit:fill默认行为；可靠降级方案是改用background-size:cover的div背景图，或引入object-fit-images插件但需满足CSS声明、图片加载完成等前提条件。
IE11 根本不解析 object-fit 和 object-position
不是“裁剪不准”或“表现有偏差”，而是 IE11 的 CSS 引擎压根没实现这两个属性。只要声明了 object-fit: cover 或 object-position: 50% 50%，IE11 就像没看见一样——直接跳过整条规则，退回到默认行为：object-fit: fill（等同于 width: 100%; height: 100% 强行拉伸）。你看到的变形、模糊、左上角对齐，全是这个默认行为的结果，和你的 CSS 写得是否正确无关。
background-size: cover 是最稳的降级方案，但必须改 HTML 结构
想在 IE11 实现类似 object-fit: cover 的效果，唯一可靠路径是放弃 <img>，改用 <div> 承载图片作为背景：
- 容器必须有明确宽高（
width和height都要写死，或用padding-top百分比 hack 模拟 aspect-ratio） - 显式写
background-repeat: no-repeat，否则 IE 可能平铺 - 用
background-position: 50% 50%，别用center center（IE11 下不稳定） -
background-size: cover在 IE9+ 完全支持，但裁剪起点和 Chrome 不一致——尤其容器宽高比与图片差异大时（比如竖图塞进横卡片），人脸可能偏移，必须真机预览校正
保留 <img> 标签？object-fit-images 插件能用，但有硬限制
插件只在检测到不支持时才激活，模拟原生行为，但它依赖几个关键前提：
- CSS 中必须已声明
object-fit（哪怕只写在全局样式里），插件才读取并生效 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片务必加固定height占位，否则按0×0计算导致裁剪错位 - 动态插入的
<img>（如 Vue/React 渲染后）需手动再调一次objectFitImages() -
object-position值推荐只用%或px，IE 对em/rem计算不准，会导致定位偏移
最容易被忽略的细节：裁剪区域不一致
就算你把 background-size: cover 和 object-fit: cover 都设成居中，IE 和现代浏览器的裁剪起点也不一样。这不是 bug，是渲染引擎底层实现差异——尤其当容器宽高比和图片原始比例相差较大时（比如 4:3 容器放 9:16 人像），关键内容（如眼睛、LOGO）可能意外被切掉。不能靠理论推算，必须在真实 IE11 环境下逐个容器预览、微调 background-position 值。
