IE全系不支持object-fit: cover，需用background-image+background-size: cover降级或position+transform手动模拟；禁用width/height拉伸防变形。
IE11及更早浏览器不支持object-fit怎么办
直接说结论：object-fit: cover在IE全系（包括IE11）中完全不生效，不是兼容性差，是压根没实现。想靠CSS补丁“模拟”它，本质是用定位+裁剪+缩放组合技绕过限制。
用background-image + background-size: cover替代![]()
标签
这是最稳妥的降级方案，适用于图片内容不需语义化、不需SEO、不需右键保存的场景（比如轮播图背景、头像容器、卡片封面）。
-
background-size: cover在IE9+已完整支持，行为和object-fit: cover一致：等比缩放并填满容器，溢出部分裁剪 - 必须显式设置
background-repeat: no-repeat，否则IE下可能默认平铺 - 容器需有固定宽高（或至少
height），否则背景图不显示；不能依赖img的固有尺寸自动撑开 - 若需响应式，
background-size: cover本身支持，但background-position建议设为center center避免IE下偏移
用position: absolute + transform: scale()手动模拟cover
当必须保留
- 容器设
overflow: hidden，图片设position: absolute并居中 - 计算缩放比：
Math.max(containerWidth / imgNaturalWidth, containerHeight / imgNaturalHeight)，这个值传给transform: scale() - IE10+支持
transform，但需加-ms-transform前缀；scale值建议用JS动态写入，避免CSS硬编码失效 - 注意：图片自然尺寸需通过
img.naturalWidth/img.naturalHeight获取，不能用offsetWidth——后者在图片未加载完时为0
为什么不用width: 100%; height: 100%强行拉伸
这是新手最常踩的坑：直接给width: 100%; height: 100%，结果图片严重变形。因为这会强制拉伸像素，破坏长宽比。
- IE下
height: 100%还依赖父容器有明确高度，否则无效——而现代flex/grid布局中父容器常无显式高度 - 即使加上
object-fit: cover，IE也无视，最终还是退回到拉伸状态 - 失真不只是“不好看”，在高清屏上还会加剧锯齿，尤其文字型图标或精细插画
真正麻烦的不是怎么写CSS，而是得同时处理图片加载时机、容器尺寸变化（比如响应式重排）、以及是否允许降级为背景图——这些决策点比语法本身更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
