移动端Banner图片显示放大问题修复技术求助

问题定位 #

从提供的CSS代码和测试情况来看，Banner放大异常主要由以下几个问题导致：

• 媒体查询嵌套错误：max-width:1199px的媒体查询块未闭合}，导致后续991px、767px的媒体查询全部被嵌套在该规则内，样式优先级逻辑混乱，部分移动端样式无法正常生效。
• background复合属性覆盖问题：在移动端（767px以下）的.banner:after样式中，background-size: cover写在了background: url(...)之前，而background是复合属性，会覆盖之前设置的background-size，导致背景图无法按预期缩放，出现放大变形。
• viewport缺失风险：若页面未设置viewport meta标签，移动端浏览器会自动缩放页面，这也是Banner显示异常的常见诱因。

修复方案 #

1. 修正媒体查询结构：补全未闭合的媒体查询括号，确保每个@media块独立生效；
2. 调整background属性顺序：将background-size: cover整合到background复合属性中，同时添加background-position: center center确保背景图居中显示；
3. 添加viewport meta标签：在HTML的<head>中加入viewport设置，强制移动端按设备宽度渲染。

修正后的完整CSS代码 #

@media only screen and (max-width: 1400px) {
    .container {
        max-width: 1140px
    }

    .banner:after {
        width: 100%;
    }
}

@media only screen and (max-width: 1199px) {
    .buttonmain {
        padding: 12px 10px;
        font-size: 14px;
    }

    .banner {
        padding: 60px 0 120px;
    }

    .banner .title {
        font-size: 36px;
        line-height: 44px;
    }
} /* 补全缺失的闭合括号 */

@media only screen and (max-width: 991px) {
    .banner .title {
        font-weight: 800;
        font-size: 30px;
        line-height: 38px;
    }
} /* 补全缺失的闭合括号 */

@media only screen and (max-width: 767px) {
    .banner {
        padding: 60px 0 130px;
    }

    .banner:after {
        height: 100vh;
        width: 100%;
        background: url(../images/MobileBannerPANG.jpg) center center / cover; /* 整合background属性，确保cover生效 */
        opacity: 0.2;
        z-index: -10;
    }

    .banner:before {
        height: 50%;
        top: -50px;
    }
}

额外建议 #

在HTML头部添加viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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