如何使.panda_section_wrapper的背景图片实现全屏幕响应式？

我正在尝试为.panda_section_wrapper元素的背景图片实现响应式效果，目前该图片在小屏设备显示正常，但在大屏设备显示异常。我可以接受图片被拉伸，但希望同时拉伸高度，以确保图片在大小屏幕均显示正常，请问该如何实现？

你的代码里存在大量重复CSS属性（多次声明max-width、background-image、background-size），重复属性会相互覆盖导致样式混乱，这是大屏显示异常的核心原因之一。结合你的需求，可按以下方式修改：

核心思路 #

要让背景图片随容器宽度同步拉伸高度，关键是让容器保持和背景图片一致的宽高比，这样无论屏幕尺寸如何变化，容器的高度都会随宽度按比例自动调整，图片就能完整适配容器。

具体修改步骤 #

1. 清理冗余CSS代码，删除重复声明的属性；
2. 使用aspect-ratio（现代浏览器均支持）设置容器宽高比，或用padding-top技巧兼容旧浏览器；
3. 设置background-size: 100% 100%;让图片完全填充容器，关闭重复显示。

修改后的代码示例 #

HTML（修正标签闭合问题） #

<main class="main">
    <!-- Panda section -->
    <div class="panda_section_wrapper">
        <!-- <div class="panda_circle"></div>
        <div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div> -->
        <div class="btn btn_watch">
            <button class="btn">Watch online</button>
        </div>
    </div>
</main>

CSS #

.panda_section_wrapper {
    max-width: 1600px;
    margin: 0 auto; /* 容器居中显示 */
    background-color: pink;
    background-image: url(img/GiantPanda.png);
    background-size: 100% 100%; /* 图片完全填充容器，随容器同步拉伸 */
    background-repeat: no-repeat;
    aspect-ratio: 1600 / 690; /* 替换为你背景图片实际的宽高比，示例为1600px宽、690px高的比例 */
    
    /* 若需兼容旧浏览器，替换aspect-ratio为以下代码：
    height: 0;
    padding-top: 43.125%; /* 计算方式：图片高度/图片宽度*100%，示例为690/1600*100%=43.125% */
}

.panda_section_container {
    max-width: 1160px; 
    height: 100%;
    margin: 0 auto;
}

.panda_circle {
    position: relative;
    width: 40vw;
    height: 50vh;
    left: 33%;
    top: 0%;
    background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
    border-radius: 50%;
}

补充说明 #

• 务必将aspect-ratio的值替换为你实际背景图片的宽高比，确保容器比例和图片完全匹配；
• 使用padding-top技巧时，需将容器height设为0，因为padding-top是基于容器宽度计算的，这样容器高度会由padding-top自动生成。

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