object-fit没反应的主因是容器缺乏明确宽高；需确保父容器有可计算高度、img设width/height:100%、避免content撑高，并注意cover/contain语义差异及ie兼容方案。
object-fit 没反应？先检查容器有没有明确宽高
写了 object-fit: cover 却没变化，90% 是因为容器高度没被约束。浏览器需要知道“填满谁”，否则它连缩放比例都算不出来。
常见失效点：
- 父容器只设了
width: 100%，但height是auto或缺失 - 用了
min-height、max-height或aspect-ratio但没配合overflow: hidden，裁剪部分溢出不可见 - 图片是异步加载的（比如 SSR 渲染后 JS 插入），初始时容器高度为 0，样式未重触发
- 父容器有
padding或border，但没写box-sizing: border-box，导致内容区实际变小
img 元素必须显式设 width 和 height 才能生效
object-fit 不是独立魔法，它作用于一个有确定渲染尺寸的 img 上。只写 width: 100% + height: auto，图片高度由原始尺寸撑开，object-fit 就不会介入。
正确写法要同时满足：
-
img自身设width: 100%和height: 100%（或具体像素值） - 父容器不能靠内容撑高，得有可计算的高度来源：比如
height: 300px、aspect-ratio: 16/9，或用 padding-bottom 技巧 - 加
overflow: hidden，否则cover裁掉的部分可能撑出滚动条或覆盖其他元素 - 推荐加
display: block，避免行内默认对齐带来的底部留白
cover 和 contain 别凭感觉选，看内容优先级
二者语义完全不同，选错会导致关键信息丢失或大面积留白。
object-fit: cover：
- 等比缩放 → 短边填满 → 长边裁剪 → 100% 填满容器
- 适合头像、轮播图、卡片封面这类“视觉必须完整”的场景
- 默认居中裁剪，但人脸常偏上——用
object-position: center 20%往上微调，避免切掉眼睛
object-fit: contain：
- 等比缩放 → 长边贴边 → 短边留白 → 整张图完整可见
- 适合产品主图、说明书插图、图表等“信息必须完整”的场景
-
object-position在这里基本无效，因为整张图都在框内
绝对别用 fill：强制拉伸变形，破坏可访问性，现代项目里等于放弃设计一致性。
IE 不支持 object-fit，老项目怎么兜底？
IE 完全不识别 object-fit，如果项目仍需兼容 IE11，不能只靠 CSS fallback。
更稳妥的替代方案是用 background-image：
- 把图片从
img标签移到容器的background-image - 用
background-size: cover/contain+background-position控制填充和焦点 - 缺点是失去
alt文本、SEO 友好性下降、无法响应式懒加载（除非用 JS 补充） - 优点是兼容性极佳，控制粒度更细，尤其适合装饰性图片
真正难处理的是既要 SEO 又要 IE 兼容的内容图——这种场景往往得用 JS 动态检测支持性，再决定渲染 img 还是 div + background。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
