object-fit: contain 是解决图片宽高比与容器不一致时保比例缩放的最干净方案，使图片等比缩放、完整居中显示，多余空间留白。
图片变形了？用 object-fit: contain 保比例缩放
直接说结论：object-fit: contain 是解决「图片宽高比和容器不一致，又不想拉伸变形」最干净的方案。它让图片完整显示在容器内，等比缩放并居中，多余空间留白。
常见错误是只设 width: 100%; height: 100%，结果图片被强行撑开、五官扭曲；或者用 background-image + background-size: contain，但丧失了
- 必须给图片父容器设置明确宽高（比如
width: 300px; height: 200px），否则contain无参照 -
width: 100%; height: 100%，否则object-fit不生效 - 别忘了加
object-position: center（默认值，但显式写上更稳妥）避免偏移
div.img-container {
width: 300px;
height: 200px;
}
div.img-container img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
object-fit: contain 和 cover 到底选哪个
关键看业务需求：要「全图可见」就选 contain；要「填满容器无留白」且允许裁剪就选 cover。
典型场景：contain 适合商品列表图、头像预览、文档缩略图——用户需要看清全部内容；cover 更适合 Banner 图、卡片背景图——视觉优先，内容完整性可妥协。
-
contain可能出现上下/左右留白，但绝对不丢内容 -
cover一定填满，但可能切掉图片边缘（尤其人像容易砍掉头顶或脚） - 两者都依赖容器宽高比，如果容器是正方形而图片是横图，
contain留白更多；反之竖图在横容器里，cover裁剪更狠
兼容性坑：IE 完全不支持 object-fit
IE11 及以下版本对 object-fit 零支持，连 fallback 都不触发。不是“部分支持”，是压根不认识这个属性。
如果项目还要求兼容 IE，不能只靠 CSS，得换思路：
- 服务端生成适配尺寸的缩略图（最稳，但增加后端负担）
- 用 JS 检测支持性：
if ('objectFit' in document.documentElement.style) {...}，不支持时降级为background-image方案（注意丢失alt和 SEO） - 用 PostCSS 插件（如
postcss-object-fit-images）自动注入 polyfill，但它只对background-image模拟，有性能损耗
为什么不用 max-width + max-height 替代
单独用 max-width: 100%; max-height: 100% 看似也能防溢出，但它只限制单边，无法保证图片在容器内居中且充分利用空间。
比如容器是 300×200，图片是 600×200（超宽不超高），max-width 会把它压到 300×100，结果高度只占一半，顶部悬空——而 object-fit: contain 会等比缩放到 300×100 并自动垂直居中。
-
max-width/max-height是「单向约束」，不控制定位 -
object-fit是「布局行为」，包含缩放 + 对齐 + 填充逻辑 - 移动端响应式中，容器尺寸动态变化时，
object-fit表现更可预测
object-fit: contain，如果图片原始尺寸极小（比如 50×50 像素塞进 300×200 容器），浏览器会像素拉伸导致模糊——这时得靠 srcset 或服务端提供多倍图，CSS 自身解决不了分辨率问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
