html - 如何设置 jumbotron 响应

Question

我尝试将 jumbotron 设置为在移动设备上响应，这对我来说太难了。

.jumbotron {
  background-image: url("../images/cover.fw.png");
  background-color: transparent;
  margin-bottom: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}

<header>

  <div class="jumbotron">

  </div>
</header>

桌面 View :

手机 View :

我需要帮助来完成这项任务。

Answer 1

如果您想在不切割边的情况下使图像具有响应性，请设置“background-size: contain”。

.jumbotron {
  background-image: url("/image/LmAwL.png");
  background-color: transparent;
  margin-bottom: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<header>
  <div class="jumbotron"></div>
</header>