通过 css 的 background-size: cover 配合 background-position: center center，可使宽幅背景图在任意屏幕（尤其是竖屏手机）上自动缩放并居中裁剪，确保关键视觉区域始终可见，同时严格兼容 bootstrap 框架与内联样式。
通过 css 的 background-size: cover 配合 background-position: center center，可使宽幅背景图在任意屏幕（尤其是竖屏手机）上自动缩放并居中裁剪，确保关键视觉区域始终可见，同时严格兼容 bootstrap 框架与内联样式。
要实现背景图像在不同设备（桌面、平板横屏、手机竖屏）上始终充满容器且不拉伸变形，核心在于让图片等比缩放至完全覆盖容器，并居中显示，超出部分自然裁剪——这正是 background-size: cover 的标准行为。
你原代码中使用 background-size: 100% 会导致图片宽度强制铺满容器，高度则按比例缩放，从而在窄高屏幕（如手机）上出现大幅留白或压缩失真。而 cover 值会智能选择“宽度或高度中较大者”作为基准，等比放大图片，确保容器被完全覆盖，多余部分（左右或上下）自动溢出并被裁剪。
✅ 正确写法（兼容 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;
overflow: hidden; /* 推荐改为 hidden，避免滚动条干扰视觉 */
">
<!-- 其他内容 -->
</div>
? 关键说明：
- background-size: cover：强制等比缩放图片，使其最小边刚好填满容器，另一方向自然溢出；
- background-position: center center：确保图像以中心为锚点裁剪，保留主体内容（如建筑中轴线）；
- background-attachment: fixed（可选）：实现视差效果，提升沉浸感；若需滚动跟随，可移除；
- overflow: hidden 更合理：auto 在移动端可能意外触发滚动条，hidden 明确禁止溢出滚动，符合裁剪预期。
⚠️ 注意事项：
- 图片原始分辨率建议 ≥ 1920×1080，避免小屏设备放大后模糊；
- 若需响应式微调（如手机端偏移焦点），可用媒体查询覆盖 background-position；
- Bootstrap 5+ 已全面支持这些 CSS 属性，无需额外 polyfill。
此方案零依赖 JavaScript，纯 CSS 实现，轻量、高效、语义清晰，是响应式背景图的最佳实践。
