background-size: cover 是实现全屏不拉伸的唯一正确起点，但需配合 height: 100vh、margin: 0、background-position: center center 及合适容器（如 body 或 .container-fluid）才能生效，否则易裁剪关键内容或留白。
background-size: cover 是唯一能真正实现“全屏不拉伸”的起点，但单独写它几乎必然失败——高度没来源、裁剪锚点偏移、父容器限制，三者缺一都会让图片只显示一条线或切掉关键内容。
为什么 background-size: 100% 100% 和 contain 都不是全屏解
前者强制拉伸，人像变胖、文字糊成一片；后者完整保留图像，但上下或左右必留白，根本达不到“撑满视口”的设计意图。只有 cover 能等比缩放+自动裁剪，确保至少一个方向填满容器。但它不负责定位、不负责高度、不负责容器边界——这些都得你手动补上。
body 或 .container-fluid 才是合法挂载点
别往 .container 里塞全屏背景图：它自带 max-width 和左右 padding，会把背景图硬生生“框”在中间，高度被截断，左右留白。正确做法是：
- 直接设在
body上，配合height: 100vh和margin: 0 - 若需嵌套结构，用
.container-fluid——它无max-width限制，width: 100%默认生效 - 若必须塞进
.carousel-item这类组件，先确认该元素已设height: 100vh且无padding干扰
iOS Safari 的 vh 陷阱和 fixed 坑
height: 100vh 在 iOS Safari 中可能把地址栏高度算进去，滚动时底部短暂空白。加 min-height: 100vh 可缓解。更隐蔽的是 background-attachment: fixed：iOS 上支持不稳定，滚动卡顿、错位频发。必须降级：
立即学习“前端免费学习笔记（深入）”；
- 全局用
fixed，再加媒体查询兜底：@media (max-width: 768px) { background-attachment: scroll; } - 避免在移动端强依赖视差效果，优先保流畅
真正容易被忽略的，是 background-position: center center ——没它，cover 会从左上角开始裁剪，人脸、Logo、CTA 按钮大概率被切掉一半。这个声明不是可选，是必配。
