如何使背景图像响应？

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

看看这是否有效