html - 背景图片在移动设备上没有响应

Question

我使用了 bootstrap 4 模板，然后对其进行了编辑以适合我的设计。除了一个方面，它几乎完全完全响应。我有一个背景图片作为主要标题图片。它是响应式的，除非在移动设备上。我想知道如何让它填满手机屏幕，同时缩小以显示图像。

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url(../img/fg-heads-nologo.png);
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px
}

header.masthead h1 {
  font-size: 2rem
}

header.masthead p {
  font-weight: 300
}

@media (min-width:768px) {
  header.masthead p {
    font-size: 1.15rem;
  }
}

@media (min-width:992px) {
  header.masthead {
    height: 100vh;
    min-height: 650px;
    padding-top: 0;
    padding-bottom: 0
  }
  header.masthead h1 {
    font-size: 3rem
  }
}

@media (min-width:1200px) {
  header.masthead h1 {
    font-size: 4rem
  }
}

<header class="masthead parallax smooth-scroll text-center text-white d-flex col-xs-4">
  <div class="container my-auto">
    <a href="#about"><span></span></a>
  </div>
</header>

谢谢!

Answer 1

在您的 CSS 中使用以下属性

background-size:contain;
background-position:center;