IE11及更早不支持object-fit，直接退回到fill行为；background-size:cover是最稳降级方案，IE9+全支持但需改img为div、设宽高、用50%50%定位；插件需满足引入顺序、CSS声明、relative父容器、图片加载完成四前提；视觉偏差需真实IE预览微调。
IE 11 及更早版本完全不解析 object-fit，写了等于没写——你看到的拉伸变形不是“效果不准”，是浏览器直接跳过该声明，退回到默认 fill 行为。
为什么 background-size: cover 是最稳的纯 CSS 降级方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑与 object-fit: cover 一致，但必须接受语义损失：
• 把
• 容器必须有明确宽高，或用 padding-top 百分比 hack（如父容器 position: relative，子 div 设 padding-top: 56.25% + position: absolute）
• background-position 必须写成 50% 50%，center center 在 IE11 下不稳定
• 显式写 background-repeat: no-repeat，否则 IE 可能平铺
• 若需响应式，aspect-ratio 在 IE 中无效，不能靠它推导高度
用 object-fit-images 插件时必须满足的四个前提
插件只在检测到不支持时才激活，模拟五种行为和 object-position 偏移，但极易因时机或结构失效：
• 引入顺序：先加载 object-fit-images.min.js，再在 DOMContentLoaded 或 window.onload 中调用 objectFitImages()
• CSS 中必须已声明 object-fit: cover 和 object-position: 50% 50%，插件才会读取并生效
• 父容器必须设 position: relative，否则生成的裁剪层定位错位
• 图片必须加载完成才能获取 naturalWidth/naturalHeight；懒加载图片建议加固定 height 占位
• 动态插入的 objectFitImages()
最容易被忽略的视觉偏差问题
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%）来对齐视觉焦点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
