IE 全系不支持 object-fit，需用 background-size: cover 降级或 object-fit-images 插件；前者需改用 div+背景图并设宽高，后者需引入 JS 并确保图片加载完成。
object-fit 在 IE 全系（包括 IE11）中完全不被解析，不是“效果不准”，而是整条 CSS 声明被忽略——你写的 object-fit: cover 和 object-position: 50% 50% 对 IE 来说等于没写，图片仍按默认 fill 拉伸变形。
为什么 background-size: cover 是最稳的降级方案
它不依赖 JS、IE9+ 全支持、行为可预测，但必须放弃 <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%、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，插件才会读取并生效；动态插入的<img>需手动再次调用 - 图片必须加载完成才能准确获取
naturalWidth/naturalHeight；懒加载图片建议加固定height占位 -
object-position支持%和px，但em/rem在 IE 中可能计算错误 - 父容器需设
position: relative，否则生成的裁剪层会定位错位
IE 中裁剪起点和现代浏览器不一致，必须真机预览校正
真正麻烦的不是“怎么填满”，而是“哪部分被切掉”。background-size: cover 在 IE 的裁剪基准点与 Chrome/Firefox 不完全一致，尤其当容器宽高比与图片差异较大时（比如竖版人像放进横版卡片），人物脸部或关键信息可能意外偏移。理论推算没用，必须在真实 IE 环境下反复预览、微调 background-position 值（如从 50% 50% 改为 48% 52%）来对齐视觉焦点。
立即学习“前端免费学习笔记（深入）”；
