直接结论：只写object-fit: contain或cover没用，必须给img或其父容器设可计算宽高，否则浏览器无基准执行缩放；常见失效原因包括img缺尺寸、父容器height: auto、flex中align-items: stretch拉伸、Safari旧版不支持aspect-ratio等。
直接结论：只写 object-fit: contain 或 object-fit: cover 没用，必须给 <img> 或其父容器设好可计算的宽高，否则浏览器连“往哪 fit”都不知道。
为什么加了 object-fit 还是拉伸？
常见现象是图片在 flex 容器里被撑高、在响应式卡片中压扁、或 Safari 里完全没反应。根本原因不是属性写错了，而是：<img> 自身没有明确尺寸约束，或者父容器高度为 auto 且未通过其他方式提供参照。
浏览器执行 object-fit 时，需要一个「已知大小的盒子」作为基准——它不负责算尺寸，只负责在已有盒子里怎么摆图。如果盒子高度是 0 或未定义（比如父级没设 height，又没用 aspect-ratio），那 contain 就只能缩到看不见，cover 就会按默认 height: auto 去拉伸。
- 检查是否漏了
width或height：至少一个得是确定值（px、rem、%都行） - Flex 容器里尤其危险：若父级
display: flex+align-items: stretch，子<img>只写了width: 100%没写height，就会被强制拉满容器高度 - Safari 旧版本（≤15.2）不支持
aspect-ratio，若你靠它兜底，object-fit实际就失去了尺寸来源
object-fit: contain 和 object-fit: cover 怎么选？
两者行为逻辑完全不同，不能互换：
-
object-fit: contain：等比缩放图片，确保完整显示，四周留白。适合证件照、商品详情图这类「必须看清全貌」的场景 -
object-fit: cover：等比缩放并裁剪，填满整个容器。适合 banner、头像、卡片封面——但得接受顶部/底部/左右可能被切掉
注意：cover 在容器又高又窄时，会把图片缩得极小再裁，用户可能以为图没加载；contain 在容器又宽又矮时，图片会缩成一个小点居中，同样有体验风险。
别混用 max-width: 100% 和 width: 100%：Safari 旧版会因此触发重排异常，导致 contain 表现错乱。
父容器没高度，怎么安全兜底？
当无法控制父容器显式设 height（比如响应式布局、CMS 输出不确定内容），推荐用 aspect-ratio + object-fit 组合，兼容性差时 fallback 到 padding-bottom 技巧：
- 现代写法：
.img-wrapper { aspect-ratio: 4 / 3; width: 100%; } .img-wrapper img { object-fit: cover; width: 100%; height: 100%; } - 兼容写法（IE / Safari ≤15.2）：
.img-wrapper { position: relative; width: 100%; padding-bottom: 75%; } .img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
注意：padding-bottom 的百分比基于父容器宽度，所以必须配合 position: absolute 才能让图片贴满；别忘了 aspect-ratio 值必须带空格（4 / 3），写成 4/3 会解析失败。
HTML width/height 属性比 CSS 更可靠？
是的，尤其对首屏图片。在 HTML 中写 <img src="a.jpg" width="400" height="300">，浏览器会在图片加载前预留 400×300 的占位框，天然防抖动、防拉伸——前提是没用 CSS 覆盖掉这两个属性。
但如果用了 width: 100% 这类响应式声明，记得同步加 height: auto，否则旧版 Chrome 可能忽略 HTML 属性，直接按 height: auto 渲染导致拉伸。
服务端渲染时，建议把原始尺寸注入 HTML 属性，而不是等 JS 去读取 naturalWidth/naturalHeight——后者要等图片加载完成，中间存在窗口期。
最常被忽略的一点：你写的 object-fit 其实从不改变图片原始尺寸，它只是视觉层的“摆放策略”。真要防拉伸，得从尺寸源头（HTML 属性、容器约束、aspect-ratio）开始卡住，而不是只依赖这个 CSS 属性本身。
