bootstrap怎么设置全屏背景图在手机端不被裁切显示-Bootstrap教程-PHP中文网

background-size: cover 在手机端裁切图片是正常行为，因其等比缩放至短边填满容器，长边必然溢出；需根据需求选 contain（保全图留白）或调整 background-position 控制可视重点区域。

background-size: cover 在手机端为什么总把图切掉？

因为 cover 的设计目标就是“撑满容器且不拉伸”，它会等比缩放图片，直到**短边刚好填满容器**，长边必然溢出被裁——这在手机竖屏（高宽比远大于桌面）下尤其明显，顶部和底部常被砍掉一大截。

这不是 bug，是行为预期。你真正要的不是“cover”，而是“整张图都露出来 + 铺满屏幕”——这两者天然冲突，必须做取舍或微调：

要全图可见 → 改用 background-size: contain，但上下/左右必留白
要铺满无白边 → 接受裁切，但可换 background-position 把重点区域“捞”进可视区，比如 center top 保人脸、center bottom 保文字标语
别用 100% 100% 强制拉伸，人像变形、文字糊成色块，iOS 和安卓低端机渲染更不可控

Bootstrap 手机端全屏背景失效的三个隐藏原因

很多开发者写了 background-size: cover + height: 100vh，但在 iPhone 或部分安卓机上背景图只显示半截，甚至完全空白——大概率踩了这三个坑：

body 或父容器没设 min-height: 100vh，而内容高度不足时，容器塌陷，背景无处可铺
用了 background-attachment: fixed：iOS 15+ 存在已知渲染 bug，配合滚动监听或 transform 时背景直接消失
容器带 border-radius 但没加 background-origin: border-box，导致圆角区域背景定位偏移，视觉上像“被切了一角”

实操：Bootstrap 登录页全屏背景适配手机的最小可行方案

不依赖 JS，纯 CSS + Bootstrap 工具类就能稳住。关键不是堆属性，而是控制好三层结构的高度继承链：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

给 html 和 body 都加上 min-height: 100vh，防止塌陷
背景图写在最外层容器（比如 <div class="bg-image">），不要套在 <code>.container 或 .row 里
用 Bootstrap 的 h-100 + d-flex + align-items-center 居中内容，避免 margin-top: 80% 这类硬编码值
手机端加一句 @media (max-width: 767.98px) { .bg-image { background-attachment: scroll; } }，绕过 fixed 渲染 bug

示例片段：

.bg-image { background-image: url('bg.jpg'); background-size: cover; background-position: center top; background-repeat: no-repeat; background-origin: border-box; min-height: 100vh; }