IE全系（含IE11）完全不解析object-fit和object-position，等同于未声明；最稳降级方案是background-size: cover（需改img为div、设明确宽高、写50% 50%和no-repeat），或用object-fit-images插件（需DOM加载后调用、CSS已声明、图片加载完成）。
IE 全系（包括 IE11）压根不解析 object-fit 和 object-position，写了等于没写——你看到的拉伸变形不是“效果不准”，是浏览器直接跳过声明，退回到默认 object-fit: fill 行为。
用 background-size: cover 替代必须满足的硬性条件
这是最稳、零 JS、行为最接近的纯 CSS 方案，但代价是放弃 <img> 标签：
- HTML 必须改成
<div style="background-image: url(...)"></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
object-fit-images 插件生效的三个关键时机
它只在检测到不支持时才激活，模拟原生五种行为和 object-position 偏移，但极易因时机错位失效：
- JS 必须在
DOMContentLoaded或window.onload后调用objectFitImages()，否则找不到<img>元素 - CSS 中必须已声明
object-fit: cover（哪怕只写在全局样式里），插件才读取并生效；动态插入的<img>（如 Vue/React 渲染后）需手动再调一次 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片建议加固定height占位，否则可能按 0×0 计算导致裁剪错位
视觉对齐偏差最容易被忽略的地方
background-size: cover 和 object-fit-images 都无法保证裁剪起点完全一致：
立即学习“前端免费学习笔记（深入）”；
- IE 的
cover裁剪基准点与 Chrome/Firefox 不同，尤其当容器宽高比与图片差异大时（比如竖版人像放进横版卡片），脸部可能意外偏移 -
object-position: 50% 50%在插件中转为transform偏移，但 IE 对em/rem单位计算不准，只推荐用%或px - 理论值没用，必须在真实 IE 环境下预览，微调
background-position（比如从50% 50%改为47% 53%）来对齐视觉焦点
