如何使背景图像响应?

Question

我试图使.panda_section_wrapper的背景图像响应。虽然它最终在小型设备上看起来不错，但在大型设备上却表现不佳。它被拉伸是可以的，但我希望它在这种情况下也能拉伸高度，这样图像在小屏幕和大屏幕上看起来都很好。我该怎么做呢?

我的网站:https://wandawix.github.io/online-zoo/index.html

我的代码:https://github.com/WandaWix/online-zoo

<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>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->

</div>

.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;

}
.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%;
}

Answer 1

试试:

.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@media only screen and (min-width: 968px) {
height: 75vh;
}
}

看看是否可以