IE全系（含IE11）完全不支持object-fit，解析器直接忽略该声明；最稳降级方案是用background-image+background-size: cover替代，需放弃img语义；必须设background-repeat: no-repeat和固定宽高。
object-fit 在 IE 全系（包括 IE11）中完全不被识别——不是“表现不准”，是 CSS 解析器直接跳过该声明，等同于没写。你看到的图片拉伸、变形、居左上角，全是浏览器按默认 object-fit: fill 渲染的结果，和 object-position 也毫无关系。
直接用 background-size: cover 替代 object-fit: cover
这是目前最稳定、无 JS 依赖、且行为一致的降级路径，前提是能接受放弃 <img> 的语义能力。
- 必须把
<img src="...">换成带背景图的块级容器，例如<div class="bg-img" style="background-image: url(...)"></div> -
background-size: cover在 IE9+ 已完整支持，缩放逻辑和object-fit: cover一致：等比缩放 → 填满容器 → 溢出裁剪 - 显式设置
background-repeat: no-repeat，否则 IE 下可能默认平铺（尤其旧版） - 容器必须有明确宽高（或至少
height），不能靠图片内容撑开；若需响应式，aspect-ratio可用但 IE 不支持，得用padding-top百分比 hack 或 JS 补齐 -
background-position语法与object-position相同（如center center、20% 30%），但它是“背景图某点对齐容器某点”，不是“内容框内定位”
为什么不能只加 width: 100%; height: 100% 强行拉伸
这是最常误用的方案，后果明确：
-
width: 100%; height: 100%会破坏原始长宽比，图片像素被强制拉伸，文字图标、细线插画立刻出现模糊/锯齿 - IE 下
height: 100%依赖父容器有显式高度，而现代布局（Flex/Grid）中父容器往往无高度，导致图片高度塌陷为 0 - 即使写了
object-fit: cover，IE 无视后仍退回到拉伸状态，等于白写
使用 object-fit-images polyfill 的实操要点
如果你必须保留 <img> 标签（需要 alt、懒加载、SEO、右键保存），就得引入 JS 补丁。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 object-fit-images，轻量（~2KB）、维护活跃、支持 IE9+
- 引入顺序必须是：先载入
polyfill.object-fit.js，再调用objectFitImages() - 调用时机很重要：需在图片
load后执行，或监听DOMContentLoaded；若图片动态插入，得手动对新节点再次调用 - CSS 中仍要写
object-fit: cover和object-position: center，polyfill 会读取这些值并计算transform: scale()+position: absolute模拟效果 - 注意：IE10+ 需加
-ms-transform前缀；缩放比要用img.naturalWidth / img.naturalHeight计算，不能用offsetWidth（未加载完时为 0）
真正难的不是选哪种方案，而是判断场景边界：要不要 alt？是否允许服务端改结构？能否接受 JS 首屏延迟渲染？这些决策比代码本身更影响最终效果。
