通过 CSS 的 background-size: cover 配合 background-position: center center，可使宽幅背景图在任意屏幕（尤其是手机竖屏）上自动缩放并居中裁剪，确保关键区域始终可见，同时严格兼容 Bootstrap 框架与内联样式。
通过 css 的 `background-size: cover` 配合 `background-position: center center`，可使宽幅背景图在任意屏幕（尤其是手机竖屏）上自动缩放并居中裁剪，确保关键区域始终可见，同时严格兼容 bootstrap 框架与内联样式。
在响应式网页开发中，宽高比失衡的背景图（如横幅式建筑图）常在手机竖屏下被强制等比缩放，导致内容区域过小、视觉空洞。根本原因在于你原用的 background-size: 100% 强制拉伸宽度至容器全宽，牺牲了高度比例，而 overflow: auto 对背景图本身无效——它只控制元素内容溢出，不作用于背景渲染。
✅ 正确解法是使用 background-size: cover：
该值让背景图等比缩放直至完全覆盖容器，超出部分自然裁剪，再配合 background-position: center center 确保焦点区域（如建筑主体）始终居中显示。这是现代 CSS 响应式背景的标准实践，且完全兼容 Bootstrap（无需额外类，纯内联样式即可生效）。
以下是优化后的完整代码（已移除冗余属性，精简可靠）：
<div class="text-white" style="
background-image: url('/static/ghc_building_darkened.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* 可选：增强视差感，移动端慎用（可能影响性能） */
height: 100vh;
width: auto;
">
<!-- 你的内容 -->
</div>
⚠️ 注意事项：
- background-attachment: fixed 在 iOS Safari 和部分安卓浏览器中可能失效或触发滚动异常，若需极致兼容性，建议移除此行；
- 若容器高度依赖内容而非视口（如非全屏模块），请将 height: 100vh 替换为明确高度（如 min-height: 500px）或使用 vh 结合 Bootstrap 的 min-vh-100 工具类（如 ）；
- 避免混用 background-size: cover 与 background-position: 50%（旧写法），统一使用 center center 更语义清晰、兼容性更佳。
总结：cover 不是“拉伸”，而是“智能缩放+居中裁剪”，它让设计意图（突出核心视觉）在所有设备上保持一致——这才是真正面向用户的响应式背景方案。
