如何设置巨型响应机

Question

我试图将巨型机设置为在移动设备上响应非常困难。

.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>

桌面视图：

电话视图：

我需要帮助才能完成此任务。

Answer 1

如果要使图像具有响应性而不会割伤侧面，请设置“背景尺寸：包含” 。

.jumbotron {
  background-image: url("https://i.stack.imgur.com/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>

Answer 2

设置background-size：在媒体查询中包含而不是封面，并根据媒体屏幕中的屏幕更改高度，效果很好

Answer 3

将背景尺寸从cover更改为contain将解决此问题。

.jumbotron {

  /* other properties */

  background-size: contain;
  -moz-background-size: contain;
}

---

信息：

contain-调整背景图片的尺寸，以确保该图片完全可见。

cover-调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘之一上切掉一点