object-fit: contain 不生效的主因是容器无宽高约束、图片未设 width 和 height、或 flex/grid 中布局塌陷；必须同时设置父容器尺寸、img 的 width: 100% 与 height: 100%、object-position: center 才能确保等比缩放并居中显示。
直接给 img 加 object-fit: contain 不起作用，90% 是因为容器没设宽高、图片自身尺寸没约束，或父容器布局塌陷。
为什么 object-fit: contain 看起来“没生效”
常见错误现象：图片还是被拉伸、留白出现在容器外侧、高度忽大忽小、在 flex/grid 里顶着顶部对齐。
- 父容器没有明确的
width和height（或aspect-ratio），object-fit就失去参照系 -
img只写了width: 100%没写height: 100%，浏览器按原始尺寸渲染，contain无从缩放 - 父容器是
display: inline或float未清除，导致尺寸坍缩为height: auto - 在
flex容器中没设align-items: center，图片默认顶对齐，留白全堆在下方
必须写的三行 CSS 才能真正居中显示完整图片
这不是“可选”，而是 contain 正常工作的最小前提：
- 父容器设置固定宽高或
aspect-ratio（如aspect-ratio: 4 / 3） -
img必须同时设width: 100%和height: 100%（不能只写一个） - 显式加
object-position: center（虽然默认是center，但老 Safari 或某些 flex 场景下会退化）
示例：
<div style="width: 300px; height: 200px;"> @@##@@ </div>
contain 下 object-position 还有用吗？
有用，但效果不是“裁剪”，而是“定位”。object-fit: contain 本身不裁剪，所以 object-position 只控制图片在留白区域中的对齐方式：
-
object-position: center→ 图片水平垂直居中（最常用） -
object-position: left top→ 图片贴左上角，留白全在右下 -
object-position: 20% 30%→ 图片的 (20%, 30%) 点对齐容器中心，适合强调局部
注意：object-position 在 contain 下不会触发裁剪；想裁剪必须用 cover。
和 background-image + background-size: contain 的关键区别
别为了图省事换成背景图——语义、可访问性、懒加载、alt 文本全丢了：
-
<img src="product.jpg" style="max-width:90%">支持loading="lazy"、decoding="async"、SEO alt 描述 -
background-image无法被屏幕阅读器识别，也不参与文档流 - 如果需要响应式占位（比如加载中灰块），
<img>配合aspect-ratio更可控
复杂点在于：你得同时管住容器尺寸、图片尺寸、父容器布局模式。漏掉任何一环，contain 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
