object-fit: contain 生效的前提是父容器有明确宽高或 aspect-ratio，且图片需设 width: 100% 和 height: 100%，再配合 flex 居中与 object-position: center。
容器没设宽高或 aspect-ratio，object-fit: contain 就是摆设
90% 的“不生效”问题出在这儿：object-fit 不是魔法，它需要一个明确的参照系。如果父容器没有 width 和 height，或者没用 aspect-ratio 锁定比例，浏览器根本不知道“容器边界在哪”，contain 就无从缩放。
常见现象：图片忽大忽小、留白跑出容器外、在 flex 里顶着顶部对齐。
- 必须给父容器加
width和height（如300px×200px），或更现代的aspect-ratio: 4 / 3 - 避免用
display: inline或浮动未清除的父容器，否则高度坍缩为auto - 如果容器是响应式的，优先用
aspect-ratio，比 padding-top hack 更干净、少一层 DOM
img 只写 width: 100% 不够，height: 100% 必须一起上
object-fit 要起作用，图片得“填满容器盒”，而不是按原始尺寸渲染。只设 width: 100% 时，浏览器仍按图片原始高度计算，contain 实际没缩放空间。
错误写法：img { width: 100%; object-fit: contain; } → 图片可能被拉伸或溢出
- 正确写法：同时设
width: 100%和height: 100% - 如果容器高度不固定（比如 flex 子项），改用
max-width: 100%; max-height: 100%+min-height: 100vh锚定视口 - 别依赖
height: auto—— 它会让contain失去约束基准
flex 布局里 align-items: center 不加，object-position: center 就白配
object-fit: contain 本身只负责等比缩放，不控制位置；object-position 控制的是缩放后图片在留白区域里的对齐方式。但若父容器是 flex，且没设 align-items: center，图片默认顶对齐，object-position: center 就只能把图片“居中在顶部留白里”，视觉上还是偏上。
- 必须组合使用：
display: flex; align-items: center; justify-content: center; -
object-position: center虽然默认值就是center，但在老 Safari 或某些 flex 场景下会退化，显式写上更稳 - 想强调局部？可以写
object-position: 20% 30%，但注意这不是裁剪，只是定位点偏移
要裁中间、不要留白？换 object-fit: cover，但得配 overflow: hidden
很多人混淆 contain 和 cover 的用途：contain 是保全图、留白；cover 是保比例、裁边缘。如果你的需求是“只显示中间部分、填满容器”，contain 从一开始就不该用。
- 用
cover时，width: 100%; height: 100%仍是必需的 - 务必加
overflow: hidden，否则裁掉的部分可能意外撑开容器或溢出 - 如果容器宽高比和图片差异极大（比如竖图塞进横容器），
cover可能裁掉太多——这时不如用 background-image +background-size: cover，语义更清晰
object-fit 都只是个没执行的声明。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
