object-fit: cover 或 contain 需容器有明确宽高才生效；仅设 object-fit 无效，因 img 是替换元素，需先确定容器尺寸；cover 裁剪填满，contain 等比居中留白；必配 overflow: hidden（cover 时）和 aspect-ratio/height 声明。
直接结论：用 object-fit: cover 或 object-fit: contain 能保持宽高比，但必须给 <img> 或其父容器设明确宽高（比如 width: 100% + height: 200px 或 aspect-ratio: 16/9），否则它根本不会生效。
为什么只写 object-fit: contain 没反应？
浏览器默认把 <img> 当作「替换元素」，object-fit 不是自动适配工具，而是“在已有盒子内怎么摆图”的指令。如果盒子本身没尺寸（例如 height: auto 且父容器也没高度），浏览器连“容器多大”都算不出来，自然不执行缩放逻辑。
- 常见失效场景：Flex 容器里只写
width: 100%，没设height，结果被align-items: stretch拉高变形 - 检查父级是否塌陷：用 DevTools 看
<img>的盒模型——如果高度显示为0或远小于预期，就是容器没尺寸 - 别依赖
max-width: 100%+height: auto来“配合”object-fit：Safari 旧版会因此触发重算异常，导致表现不稳定
object-fit: cover 和 object-fit: contain 怎么选？
两者行为逻辑完全不同，不能互换：
-
object-fit: cover：图片等比缩放后填满整个容器，超出部分裁剪——适合封面图、头像、卡片缩略图；注意关键内容需居中，否则可能被切掉 -
object-fit: contain：图片等比缩放后完整居中显示，四周留白——适合证件照、图表、产品主图；此时object-position基本无效，因为整张图都在框内 -
object-fit: fill就是默认值，强制拉伸，慎用；除非你明确接受形变
移动端必须配合的尺寸声明方式
只靠 width: 100% 不够，必须让容器有可计算的高度基准：
- 推荐用
aspect-ratio: 16 / 9+width: 100%：现代浏览器支持好，响应式友好，避免硬编码像素值 - 兼容老设备可退而求其次：
width: 100%+height: 200px（或rem、vh单位） - 如果父容器是 Flex/Grid，确保子项没被
flex-grow或grid-area意外撑开；必要时加min-height: 0阻断弹性拉伸 - 绝对不要只对
<img>设width: 100%却放任height: auto——这等于把控制权还给原始尺寸，object-fit失效
最容易被忽略的一点：如果你用了 object-fit: cover 却看不到裁剪效果，先检查父容器有没有 overflow: hidden。没有它，裁掉的部分会溢出并可能破坏布局；有它但依然“没裁”，大概率是容器高度压根没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
