结论：用 object-fit: cover 或 contain 是最干净、语义正确、无需 JS 的方案；但必须同时满足两个硬性条件——图片有明确宽高、父容器有约束尺寸，否则不生效。
直接说结论：用 object-fit: cover 或 object-fit: contain 是最干净、语义正确、无需 JS 的方案；但必须同时满足两个硬性条件——图片有明确宽高、父容器有约束尺寸，否则它根本不会生效。
为什么加了 object-fit 没反应
最常见的原因是浏览器“没地方可裁”或“没参照可缩”。object-fit 不改变盒模型，只控制内容在已有盒子内的摆放方式。
- 图片本身没设
width和height（哪怕只是width: 100%+height: 100%），它就按原始尺寸渲染，object-fit失去作用对象 - 父容器高度是
auto或未设置，比如只写了width: 100%，那容器实际高度由图片撑开，没有“要填满的目标区域” - 父容器漏了
overflow: hidden，cover裁掉的部分会溢出显示，造成视觉错觉——以为没裁 - 在
<picture>内部直接对<img>设object-fit，部分旧版 Safari 不支持，建议统一用<img>标签
cover 和 contain 怎么选
二者都保持原始宽高比，但策略相反：一个优先填满，一个优先显全。
-
object-fit: cover：等比缩放后覆盖整个容器，超出部分裁剪。适合 banner、卡片图、头像——关键内容需避开边缘，可用object-position: center top微调焦点 -
object-fit: contain：等比缩放至完全可见，居中显示，留白不可避免。适合产品图、证件照、用户上传预览——确保五官/文字不被切 - 别用
fill，它强制拉伸，破坏比例；也别用none，图片原样居中，和没设一样
响应式场景下怎么稳住效果
单纯靠 object-fit 无法解决“容器尺寸随屏幕变化导致图片忽大忽小”的问题，必须配合容器自身的比例控制。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
aspect-ratio: 16 / 9（现代浏览器支持），比写死height: 300px更可靠 - 图片标签仍需设
width: 100%; height: 100%，否则object-fit无生效基础 - 若需兼容老浏览器，用
background-image+background-size: cover替代，但会丢失alt、懒加载、srcset响应式能力 - 图片加载完成前，DOM 中只有占位框，
object-fit行为不可控——建议配loading="lazy"+ 占位背景色，或监听load事件再激活样式
容易被忽略的细节
真正影响落地效果的，往往不是属性本身，而是上下文约束。
-
object-fit对 SVG 或无尺寸图片（如 base64 但没声明宽高）行为不稳定，务必确保图片资源自带宽高信息或通过 CSS 显式声明 - 在 Next.js 等 SSR 框架中，首屏直出 HTML 时图片可能还没加载，
object-fit渲染异常，需结合useEffect或onLoad做兜底 -
object-position默认是center center，但如果你用了cover又发现人脸总被切，改一句object-position: center top就能救回来
