ie11不支持object-fit，需用js模拟cover效果：监听图片加载完成，通过naturalwidth/height与容器尺寸计算缩放比和偏移量，用transform+transformorigin实现居中裁剪，或改用background-size:cover作为备选方案。
IE11 里 object-fit 完全无效，别指望 CSS hack 能绕过
IE11 及更早版本压根不识别 object-fit，连 object-fit: fill 都会静默忽略。用 @supports (object-fit: cover) 检测也无效——IE 把整个 @supports 块当垃圾丢掉。所以必须换思路：用 JS 模拟行为，再配合 CSS 定位强行“撑满”或“居中裁剪”。
用 getBoundingClientRect() + style.transform 模拟 cover 效果
核心是算出图片原始宽高比与容器宽高比的关系，再决定缩放倍数和偏移量。注意不能只靠 naturalWidth/naturalHeight，得等图片加载完成再计算，否则取到 0。
- 监听
img的load事件（或用onload属性），避免未加载就计算 - 用
img.naturalWidth / img.naturalHeight得到原图比例，用container.clientWidth / container.clientHeight得到容器比例 - 若原图比例 > 容器比例，说明图片更“宽”，需按高度缩放，再
translateX居中；反之按宽度缩放 +translateY - 缩放后用
transform-origin: center确保平移基准点正确，否则偏移错位
function fitCover(img, container) {
const iw = img.naturalWidth, ih = img.naturalHeight;
const cw = container.clientWidth, ch = container.clientHeight;
const scale = Math.max(cw / iw, ch / ih);
const tx = (cw - iw * scale) / 2;
const ty = (ch - ih * scale) / 2;
img.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`;
img.style.transformOrigin = 'center';
}
IE 下 background-size: cover 是可靠备选，但仅限背景图场景
如果图片本来就是用 background-image 加载的，直接改用 background-size: cover 最省事——IE8+ 全支持，且无需 JS。但要注意：
-
background-size不影响语义结构，无法替代<img>的alt、loading或可访问性属性 - 容器必须设
background-repeat: no-repeat和background-position: center，否则边缘可能拉伸变形 - 动态换图时，要同时更新
background-image和background-size，否则 IE 可能缓存旧尺寸
polyfill 库如 object-fit-images 在 IE 中的坑
object-fit-images 确实能自动处理 <img> 和 <video></video>，但它依赖 ResizeObserver 的 polyfill（IE 不支持），而它自带的降级方案是轮询 offsetWidth，性能差、易漏触发。实际项目中建议：
- 只对明确需要
object-fit的少数关键图片手动调用 fit 函数，别全局初始化 - 避免在
scroll或resize里反复调用 fit 函数，IE 下重排压力大；改用防抖 +setTimeout(..., 0)延迟执行 - 如果容器宽高由 flex/grid 动态计算，务必等 layout 稳定后再调用（比如
requestAnimationFrame里执行一次）
真正麻烦的不是计算逻辑，而是 IE 对 getBoundingClientRect() 返回值的精度误差——有时小数点后三位偏差会导致 1px 错位，得手动 Math.round() 一下再设 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
