英雄横幅背景图浏览器响应正常，手机端显示异常求助

核心原因 #

问题出在background-attachment: fixed属性上——移动端浏览器对固定背景的渲染逻辑和桌面端差异很大，当结合background-size: cover和100vh高度时，会触发异常的缩放行为，导致背景图被过度放大，人物主体超出可视区域。浏览器响应式调试模式模拟的是桌面视口逻辑，所以不会出现这个问题。

解决方案 #

1. 移除固定背景属性 #

将background-attachment: fixed替换为默认的scroll，这是解决移动端背景异常的关键：

.hero-bg {
    background: url('../img/hero-banner.jpg') 50% scroll no-repeat;
    height: 100vh;
    background-size: cover;
}

2. 优化移动端媒体查询 #

针对移动端调整背景定位，确保人物主体始终在可视范围内：

@media only screen and (max-width: 980px) {
    .hero-bg {
        background: url('../img/Klein.jpg') center scroll no-repeat;
        height: 100vh;
        background-size: cover;
        /* 若人物仍偏移，可微调位置，比如用25% 50%精准对准 */
        background-position: 25% 50%;
    }
}

3. 可选：修复VH移动端兼容性 #

部分移动端浏览器的100vh会包含地址栏高度，导致实际可视区域被压缩，可添加额外样式修复：

@media only screen and (max-width: 980px) {
    .hero-bg {
        min-height: -webkit-fill-available;
        height: 100vh;
    }
}

为什么之前的尝试无效 #

• object-fit仅对<img>标签生效，对CSS背景图不起作用
• background-size: contain会保持图片比例，但会导致背景出现空白，不符合全屏需求
• 更换小图但保留fixed属性，依然会触发移动端的缩放bug

内容的提问来源于stack exchange，提问作者Haidepzai