object-fit: cover没生效的最常见原因是容器缺乏明确宽高；必须为容器设width/height或aspect-ratio，img设width:100%;height:100%，并加overflow:hidden，否则无裁剪基准。
直接用 object-fit: cover，但必须配齐容器尺寸、溢出控制和图片宽高声明，缺一不可。
为什么 object-fit: cover 没生效？
最常见原因是容器没设明确的 width 和 height。浏览器不知道“裁剪基准”在哪，cover 就没作用空间。
- 错误写法：
<div><img src="x.jpg" style="max-width:90%"></div>——div无尺寸，img按原始大小渲染 - 正确写法：给容器加固定尺寸，比如
div.card { width: 300px; height: 200px; } - 必须显式加
overflow: hidden，虽然多数浏览器默认隐藏溢出，但不声明在某些布局（如 Flex）下会失效 -
img元素需设width: 100%; height: 100%，否则object-fit无法作用于完整盒模型
object-fit: cover 和 background-size: cover 怎么选？
核心区别不在效果，而在语义和能力边界。
- 用
<img>+object-fit：保留alt文本、可被屏幕阅读器识别、支持原生懒加载（loading="lazy"）、能参与文档流、SEO 友好 - 用背景图 +
background-size: cover：适合纯装饰图、需要叠加蒙版或渐变、支持background-position精细偏移，但无法提供语义信息 -
object-fit不支持background-position那种偏移，但可用object-position: top left调整裁剪锚点，默认居中 - 如果原图远小于容器尺寸（比如 100×100 的图塞进 600×400 容器），
cover会强行放大导致模糊，得确保原图分辨率 ≥ 显示尺寸
IE 兼容怎么办？
IE 完全不支持 object-fit，Edge 16+ 才开始支持。不能只靠 CSS fallback。
- 简单降级：对
img设width: 100%; height: auto，至少保持比例不拉伸，但不裁剪 - 避免在关键业务图（如电商主图）上只依赖
object-fit，没 JS fallback 的话，IE 用户看到的是未裁剪+留白的图 - 可用
picture+srcset配合 JS 检测，或引入object-fit-imagespolyfill，但要注意 polyfill 会触发额外 DOM 查询，影响首屏性能
真正容易被忽略的不是语法，而是容器盒模型是否真正“存在”——flex-item 或 grid item 如果没设尺寸、又没加 flex-shrink: 0，它会塌陷，object-fit 就成了摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
