旧版 Edge（12–18）和 IE 全系不支持 object-fit，直接退回到 fill 行为；background-size: cover 是最稳的纯 CSS 降级方案，IE9+ 支持且裁剪逻辑一致，但需改 img 为 background-image 并设明确宽高；使用 object-fit-images 插件时须确保引入顺序、声明 CSS、父容器 relative 及图片加载完成；background-size: cover 与插件均存在裁剪基准差异，IE 中视觉焦点易偏移，须实测微调 background-position。
旧版 Edge（12–18）和 IE 全系（包括 IE11）压根不解析 object-fit，写了等于没写——你看到的拉伸变形不是“效果不准”，是浏览器直接跳过该声明，退回到默认 fill 行为。
为什么 background-size: cover 是最稳的纯 CSS 降级方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑与 object-fit: cover 一致，但必须接受语义损失：
- 把
<img src="...">改成<div style="background-image: url(...)"></div> - 容器必须有明确宽高，或用
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 中无效，不能靠它推导高度
必须保留 <img> 标签时，用 object-fit-images 插件的实操要点
插件只在检测到不支持时才激活，模拟五种行为和 object-position 偏移，但极易因时机或结构失效：
飞书发语音(edge)
下载
飞书语音消息发送器。基于 Edge TTS，一键将文字转为语音发送到飞书。 使用场景： - 发送语音通知/提醒到飞书 - 文字转语音自动播报 触发词：飞书语音、语音发送、tts、文字转语音
- 引入顺序：先加载
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()
最容易被忽略的视觉偏差问题
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%）来对齐视觉焦点
