如何使背景图片适合手机尺寸？

如何解决如何使背景图片适合手机尺寸？

在我的桌面上，即使当我缩小窗口时，我的背景图像也非常适合并且响应良好。当我在移动设备上打开它时，图像没有改变，并且确实放大了。我该如何解决？这是我当前在CSS中的代码

.welcome-area{
    background-image: url(../images/13/Dr-Teals-Banner.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;
  }

这是我的html代码：

 <section class="welcome-area text-center" data-scroll-index="1">
          <div class="overlay-bg-65 flex-center med-padding">
              <div class="container">
                  <div class="welcome-text">
                      <img src="images/logo-animation/logo.gif"><br><br><h5 class="color-ddd fw-400">DR TEAL'S</h5>
                      <h1 class="mb-20px color-fff fw-100 cd-headline clip">

                          <span class="cd-words-wrapper">
                              <b class="is-visible color-gold">Graphic Designer</b>
                              <b class="color-gold">Branding</b>
                              <b class="color-godl">Print</b>
                              <b class="color-gold">Photography</b>
                              <b class="color-gold">Digital</b>
                          </span>
                      </h1>
                      <h6 class="color-ddd fw-400 mb-30px">2019-Present</h6>
                      <a href="https://instagram.com/edisson.alberto/" class="color-fff color-blue-hvr mr-15px"><i class="fa fa-instagram"></i></a>
                      <a href="https://www.linkedin.com/in/edissonhidalgo" class="color-fff color-blue-hvr"><i class="fa fa-linkedin"></i></a>
                  </div>
                  <a href="#" class="color-fff fs-35 p-absolute scroll-bottom-btn" data-scroll-nav="2"><i class="fa fa-angle-down"></i> </a>
              </div>
          </div>
      </section>

解决方法

您已经设置了min-height:100vh，这意味着它将始终填满整个高度并因此放大图片。

如果您希望图像按比例缩放，请设置width: 100%