object-fit图片不按预期缩放的根本原因是父容器未设宽高或受其他CSS干扰；cover裁边填满，contain留白保全图；IE需用background-image或polyfill降级；srcset选图与object-fit无关。
object-fit 为什么图片还是不按预期缩放
根本原因通常是父容器没设宽高，或者图片被其他 CSS（比如 max-width: 100%）干扰了渲染流。浏览器只在知道“可用空间多大”时，才按 object-fit 规则裁剪或拉伸内容。
实操建议：
- 给图片的直接父容器设置明确的
width和height（哪怕用aspect-ratio），否则object-fit: cover可能完全失效 - 移除图片自身上的
width/height内联样式或强制尺寸声明，让其由父容器和object-fit共同控制 - 检查是否意外触发了
img { display: inline }行内行为——加一句display: block能避免底部留白干扰比例
cover 和 contain 在响应式布局里的实际区别
object-fit: cover 保证填满容器，但会裁边；object-fit: contain 保证全图可见，但可能留白。选哪个不看“好不好看”，而看业务约束。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 商品主图、头像预览：用
cover，用户更在意构图饱满，允许裁切 - 证件照上传预览、图表截图展示：必须用
contain，信息完整性优先 - 做响应式轮播图时，如果前后卡片高度不一致，
cover容易导致同一张图在不同断点下裁剪区域跳变——这时可配合object-position锁定焦点，比如object-position: center top
IE 不支持 object-fit 怎么安全降级
IE11 及以下完全不识别 object-fit，连 @supports 都无效，不能靠特性检测兜底。
可靠方案只有两个：
- 用
background-image替代<img alt="如何通过css控制响应式图片等比缩放 object-fit属性高级应用大全" >：把图片设为父容器背景，用background-size: cover/contain+background-position模拟行为（注意：失去 alt 文本和 SEO 优势） - 引入轻量 polyfill，如
object-fit-images，但必须在<img alt="如何通过css控制响应式图片等比缩放 object-fit属性高级应用大全" >加载完成后手动调用objectFitImages()，否则 DOM 中的图片不会被处理 - 服务端判断 UA，对 IE 返回已缩放好的固定尺寸图（适合图片源可控的后台系统）
和 srcset、sizes 搭配时容易忽略的兼容性坑
object-fit 本身不影响资源选择逻辑，但它会让高 DPR 设备上加载的高清图“看起来没用”——比如你用了 sizes="(max-width: 768px) 100vw, 50vw"，结果在手机上因 cover 裁掉一半，其实只用了原图中间 20% 的像素。
关键提醒：
-
srcset选图依据是容器宽度，不是最终显示区域；所以别指望object-fit能“省流量” - 如果用
object-fit: scale-down，它只在图片比容器大时才缩放，小图会原样显示——这意味着你得确保所有srcset选项都 ≥ 容器最小可能尺寸，否则可能出现模糊 - 在 Safari 15.4 之前，
object-fit+picture+media组合有渲染延迟，首次加载可能闪动，加will-change: transform可缓解
真正难的不是写对属性，而是想清楚：这张图的语义角色是什么？是装饰、内容主体，还是结构锚点。不同角色，object-fit 就不该一视同仁。
