通过 CSS 的 background-size: cover 配合 background-position: center center，可确保背景图始终覆盖整个容器、居中显示，并在小屏（如手机竖屏）上自动裁剪边缘而非压缩变形。
通过 css 的 `background-size: cover` 配合 `background-position: center center`，可确保背景图始终覆盖整个容器、居中显示，并在小屏（如手机竖屏）上自动裁剪边缘而非压缩变形。
要实现背景图像在各类设备（桌面、平板横屏、手机竖屏等）上均保持视觉完整性与比例协调，关键在于避免使用 background-size: 100%（它强制等比缩放以完全可见，导致手机上图像被过度压缩变矮），而应采用 cover 模式——该值会等比缩放图像，使其宽度和高度均不小于容器尺寸，从而完全覆盖容器，超出部分自然裁剪。
以下是推荐的完整内联样式写法（兼容 Bootstrap 项目，无需额外类或外部 CSS）：
<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;
overflow: auto;
">
<!-- 其他内容 -->
</div>✅ 关键属性说明：
- background-size: cover：核心解决方案，确保图像始终填满容器且不失真；
- background-position: center center：使图像以中心为锚点裁剪，保留主体区域（如建筑中轴）；
- background-attachment: fixed（可选但推荐）：增强视差效果，提升移动端沉浸感（注意：iOS Safari 对 fixed 在 overflow: auto 容器中支持有限，若遇异常可移除）；
- 移除 background-position: 50%（不完整写法，应为 50% 50% 或 center center）及 background-size: 100%（这是导致手机端拉伸失真的主因）。
⚠️ 注意事项：
- cover 模式下，不同宽高比设备裁剪区域不同，请务必在真实手机（尤其是 iPhone 竖屏、Android 小屏）上测试关键视觉焦点是否仍在可视范围内；
- 若需更强控制（如指定最小可见高度），可结合媒体查询补充 min-height 或使用 Bootstrap 的响应式工具类（如 min-vh-100 替代 height: 100vh）；
- overflow: auto 在全高背景容器中通常非必需，除非内部内容超长需滚动；若仅作背景，可安全移除以简化逻辑。
此方案轻量、标准、零依赖，完美契合 Bootstrap 项目的内联样式约束，同时兼顾语义清晰性与跨设备鲁棒性。
