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 横屏下会错乱，加 viewport meta 才可靠）
• 用 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 只能选一个方向“优先适配”。常见于竖屏手机看横图：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 检查图片原始比例，如果是 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 实际值，再看父容器高度是不是你预期的数字。