background-size: contain 不会裁切图片，所谓“被切”实为父容器高度塌陷导致背景渲染区域过小；解决需设明确宽高、aspect-ratio 或 padding-top 百分比技巧，并排查路径、overflow、浮动塌陷等问题。
background-size: contain 为什么图片还是被切掉？
它根本不会切除——background-size: contain 的行为是「等比缩放，完整显示」，只要容器高度没塌陷，图就一定全在。所谓“被切”，90% 是因为父容器 height 为 auto 且内容没撑开，导致背景渲染区域实际只有几像素高，图自然只露出一条缝。
contain 配合 background-position:center 仍留白，怎么压掉？
留白是 contain 的必然结果，不是 bug。想视觉上“填满”，不能靠 position 微调，得让容器自己有高度：
- 给容器设明确宽高，比如
min-height: 100vh（注意：vh在 iOS Safari 横屏下会错乱，加viewportmeta 才可靠） - 用
aspect-ratio锁定比例，再配min-height，例如：aspect-ratio: 16/9; min-height: 50vh; - 老项目兼容 IE 或 Safari 15.4 以下？改用
padding-top百分比技巧，值 = 图片高 ÷ 宽 × 100%，如 1080÷1920×100% =56.25%，然后height: 0+background-position: top
移动端用 contain 出现上下大片留白，怎么办？
本质是屏幕宽高比和图片宽高比不一致，contain 只能选一个方向“优先适配”。常见于竖屏手机看横图：
- 检查图片原始比例，如果是 1920×1080（16:9），在 iPhone 14 Pro（19.5:9）上，
contain会按宽度缩放，高度留白；反之，若图是 9:16，留白就在左右 - 不要强行用
background-size: 100% 100%拉伸——它会变形，尤其文字/Logo 类背景一眼可辨 - 更务实的做法：准备两套图（横版 + 竖版），用
@media (orientation: portrait)切换background-image
为什么加了 contain 还是看不到图？排查顺序
不是属性写错了，而是渲染链断了：
- 确认
background-image路径正确，浏览器 Network 面板看是否 404 - 检查父容器有没有
overflow: hidden或clip-path把图裁了 - 浮动子元素未清除？父容器高度塌陷，
computed height是 0 —— 改用display: flow-root，别信overflow: hidden的“修复”假象 - 背景图设在
body上？记得html, body { height: 100%; margin: 0; }，否则100vh也没用
真正难的从来不是写哪行 CSS，而是判断「图到底有没有被渲染出来」——先查 computed styles 里的 background-size 和 background-position 实际值，再看父容器高度是不是你预期的数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
