IE全系不支持object-fit，需用background-size: cover降级或object-fit-images插件；前者需改div+背景图并设宽高，后者需JS调用且兼容position定位；裁剪基准点IE与现代浏览器不同，须实测微调。
IE 全系（包括 IE11）完全不解析 object-fit，写了等于没写——你看到的拉伸变形不是“效果不准”，是浏览器直接跳过该声明，退回到默认 fill 行为。
为什么 background-size: cover 是最稳的纯 CSS 降级方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑可预期，但代价明确：必须放弃 <img> 标签语义。
- HTML 改为
<div style="background-image: url(./photo.jpg)"></div>，alt和 SEO 能力丢失 - 容器必须有明确宽高（如
width: 300px; height: 200px），不能靠内容撑开；aspect-ratio在 IE 中无效 - CSS 必须同时写：
background-size: cover、background-position: 50% 50%、background-repeat: no-repeat - 若需响应式高度，用
padding-top百分比 hack：父容器设position: relative，子<div>设padding-top: 56.25%+position: absolute占位 -
background-position: center center在 IE11 下不稳定，务必写成50% 50%
必须保留 <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和object-position: 50% 50%，插件才会读取并生效 - 父容器需设
position: relative，否则生成的裁剪层会定位错位 - 图片必须加载完成才能准确获取
naturalWidth/naturalHeight；懒加载图片建议加固定height占位 - 动态插入的
<img>（如 Vue/React 渲染后）需手动再次调用objectFitImages() -
object-position支持%和px，但em/rem在 IE 中可能计算错误
真正麻烦的不是“怎么填满”，而是“哪部分被切掉”
background-size: cover 和 object-fit-images 都无法保证裁剪起点与现代浏览器完全一致。IE 的 cover 裁剪基准点与 Chrome/Firefox 不同，尤其当容器宽高比与图片差异较大时（比如竖版人像放进横版卡片），人物脸部或关键信息可能意外偏移。
立即学习“前端免费学习笔记（深入）”；
理论推算没用，必须在真实 IE 环境下反复预览、微调 background-position 值（如从 50% 50% 改为 48% 52%）来对齐视觉焦点。这个过程没法自动化，也没法靠“兼容性表”跳过。
