通过 css 的 background-size: cover 配合 background-position: center center，可使宽幅背景图在任意屏幕（尤其是手机竖屏）上自动缩放并居中裁切，确保关键视觉区域始终可见，无需 javascript 或额外框架。
通过 css 的 background-size: cover 配合 background-position: center center，可使宽幅背景图在任意屏幕（尤其是手机竖屏）上自动缩放并居中裁切，确保关键视觉区域始终可见，无需 javascript 或额外框架。
在响应式网页开发中，宽高比失衡的背景图（如横幅式建筑照片）常在移动设备上因强制完整显示而过度缩小、失去视觉冲击力。根本原因在于原代码中使用了 background-size: 100%——它将图片宽度拉伸至容器 100% 宽度，高度则等比缩放，导致竖屏手机上图片整体变小、上下留白严重。
正确解法是采用 background-size: cover：该值确保背景图完全覆盖容器，同时保持原始宽高比；浏览器会自动缩放图片，并从中心向四周延伸，超出容器边界的区域自然被裁剪——这正是你所需的“两侧被切掉”的效果。
以下是优化后的完整样式（兼容 Bootstrap 且仅用内联 style）：
<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，防止因缩放微小偏移触发不必要的滚动条。
⚠️ 注意事项：
- 若图片本身分辨率不足，cover 在大屏上可能模糊，建议提供至少 1920px 宽的高清源图；
- 移动端需测试 background-attachment: fixed 兼容性（部分 Android 浏览器不支持），可加媒体查询降级：
@media (max-width: 768px) { background-attachment: scroll; } - Bootstrap 用户可进一步封装为自定义类（如 bg-cover-center），便于复用。
此方案零依赖、语义清晰、全平台兼容，是现代响应式背景图的最佳实践。
