ie全系不支持object-fit，需用background-size: cover替代或引入object-fit-images插件；前者需放弃img语义、设固定宽高，后者需手动调用且裁剪基准点与现代浏览器不一致，必须实测微调。
IE 全系（包括 IE11）完全不解析 object-fit，写了等于没写——你看到的拉伸变形不是“效果不准”，是浏览器直接跳过该声明，退回到默认 fill 行为。
用 background-size: cover 替代是最稳的纯 CSS 方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑可预期，但代价明确：必须放弃 <img> 标签语义。
- HTML 改为
<div style="background-image: url(./photo.jpg)"></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> 设 <code>padding-top: 56.25%+position: absolute占位 -
background-position: center center在 IE11 下不稳定，务必写成50% 50% - 引入
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() -
object-position支持%和px，但em/rem在 IE 中可能计算错误 - IE 的
cover裁剪基准点与现代浏览器不同，尤其当容器宽高比与图片差异较大时（比如竖版人像放进横版卡片），人物脸部或关键信息可能意外偏移 - 理论推算没用，必须在真实 IE 环境下反复预览、微调
background-position值（如从50% 50%改为48% 52%）来对齐视觉焦点 - 这个过程没法自动化，也没法靠“兼容性表”跳过
必须保留 ![]()
标签时，用 object-fit-images 插件
它只在检测到不支持时才激活，模拟原生五种行为（fill/contain/cover/none/scale-down）和 object-position 偏移，体积约 3KB。
IE 的 cover 裁剪基准点和现代浏览器不一致
真正麻烦的不是“怎么填满”，而是“哪部分被切掉”。background-size: cover 和 object-fit-images 都无法保证裁剪起点与 Chrome/Firefox 完全一致。
