ie11完全不支持object-fit和object-position，必须用background-size: cover降级或object-fit-images插件；前者需改img为div+背景图并设明确宽高及background-position: 50% 50%，后者需确保js加载完成、父容器relative、图片加载完毕且手动调用objectfitimages()。
IE11 完全不解析 object-fit 和 object-position，不是“效果不准”，而是整条 CSS 声明被跳过——你写的 object-fit: cover 在 IE11 里等于没写，图片照常拉伸变形、左上角对齐。
为什么 background-size: cover 是最稳的纯 CSS 替代方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑与 object-fit: cover 最接近，但必须接受语义损失：
- HTML 必须从
<img src="...">改为<div style="max-width:90%"></div> - 容器必须有明确宽高（如
width: 300px; height: 200px），或用padding-top百分比 hack（父容器position: relative，子div设padding-top: 56.25%+position: absolute） - CSS 必须同时写：
background-size: cover、background-position: 50% 50%（别用center center，IE11 解析不稳定）、background-repeat: no-repeat -
aspect-ratio在 IE 中无效，不能靠它推导高度
保留 ![]()
标签时，object-fit-images 插件怎么用才不翻车
插件只在检测到不支持时激活，但极易因时机或结构失效：
- 引入
object-fit-images.min.js后，必须在DOMContentLoaded或window.onload中调用objectFitImages() - CSS 中必须已声明
object-fit: cover和object-position: 50% 50%，插件才读取并生效；动态插入的<img>（如 Vue/React 渲染后）需手动再调一次 - 父容器必须设
position: relative，否则生成的裁剪层定位错位 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片建议预留固定height占位，否则尺寸计算错误 - 插件通过读取
font-family属性解析值（如font-family: "cover"），或用 JS 注入，不能只靠 CSS 声明
最容易被忽略的视觉偏差问题
background-size: cover 和 object-fit-images 都无法保证裁剪起点完全一致：
- IE 的
cover裁剪基准点与 Chrome/Firefox 不同，尤其当容器宽高比与图片差异大时（如竖版人像放进横版卡片），脸部可能意外偏移 -
object-position: 50% 50%在插件中转为transform偏移，但 IE 对em/rem单位计算不准，只推荐用%或px - 理论值没用，必须在真实 IE 环境下预览，微调（比如从
50% 50%改为47% 53%）来对齐视觉焦点
真正麻烦的不是“怎么填满”，而是“哪部分被切掉”——IE 没有标准可循，只能靠实机校正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
