object-fit: contain 能保持图片原始比例，但需配合明确宽高声明（如 width: 100% + height: 200px），否则因容器无尺寸而失效；它是在既有盒模型内等比缩放居中显示，非自动适配。
直接结论：用 object-fit: contain 能保持图片原始比例，但必须配合明确的宽高声明（如 width: 100% + height: 200px），否则它根本不会生效。
为什么 object-fit: contain 加了也没用？
常见错误是只写 img { object-fit: contain; }，却没给 img 设定具体尺寸范围。object-fit 不是“自动适配”，它是“在已有盒模型内怎么摆图”——如果盒子本身没宽高（比如 height: auto 且父容器也没高度），浏览器连“容器多大”都算不出来，contain 就无从谈起。
- 检查是否漏写了
width或height：至少要有一个是确定值（px、rem、%都行） - Flex 容器里尤其危险：如果父级是
display: flex且设了height: 300px，但子img只写了width: 100%没写height，它可能被align-items: stretch拉高变形 - 别混用
max-width: 100%和width: 100%：Safari 旧版本会因此触发尺寸重算异常，导致contain表现不稳定
object-fit: contain 和 max-width: 100%; height: auto 的区别在哪？
两者都能防拉伸，但行为逻辑完全不同：
-
max-width: 100%; height: auto：让图片按容器宽度缩放，高度自适应——适合内容流式布局，但无法控制高度上限，可能撑开容器或留大片空白 -
object-fit: contain：强制图片等比缩放到“刚好能完整放进容器”，哪怕容器又高又窄，它也会缩到极小并居中，四周留白——适合卡片、弹窗、固定尺寸模块 - 性能上：后者不触发重排，但若容器尺寸远大于图片（比如 50×50 的图塞进 400×300 盒子），
contain会让它显得特别小，用户可能误以为加载失败
移动端真机测试时容易踩的坑
iOS Safari 和安卓 WebView 对 object-fit 的支持差异不小，不能只信 Can I Use 上的“支持”标记：
- iOS Safari 9.3（iOS 9.3）需要
-webkit-object-fit: contain，Autoprefixer 必须配safari >= 9才能加前缀 - 安卓部分低端 WebView（如某些定制 ROM 内置浏览器）压根不认
object-fit，加了等于没加 - 真机测试别只看竖屏：横屏下容器宽高比突变，
contain可能让原本合适的图突然缩成图标大小，得搭配媒体查询兜底（比如横屏切回max-width: 100%）
兼容 IE 或老旧 WebView 的降级方案
如果项目必须跑在 IE 或某些安卓老系统上，object-fit 就得彻底放弃：
- 改用背景图：
div { background-image: url(...); background-size: contain; background-repeat: no-repeat; background-position: center; } - 代价是失去
alt文本、无法被屏幕阅读器识别、不能右键保存、SEO 权重下降 - 更隐蔽的问题：背景图无法响应图片加载失败事件（
onerror），出错时只能靠 JS 监听load+error状态再切换 fallback 图
最常被忽略的一点：无论用 contain 还是 cover，只要容器宽高比和图片原图不一致，就一定有取舍——要么留白，要么裁边。别指望一个 CSS 属性解决所有构图问题，该换图的时候就得换图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
