html - 如何在更大的显示器上缩放 jumbotron bootstrap？

Question

我目前有一个网站使用来自 Codecademy“如何制作网站”教程的 bootstrap 中的 jumbotron 功能。

在其中，它使用以下 html:

<div class="jumbotron">
        <div class="container">
            <h1>Heading</h1>
            <p>Tagline</p>
            <a href="#About"><button type="button" class="btn btn-lg btn-danger">Learn More</button></a>
            <!--<a href="#">Learn More</a>-->
        </div>
    </div>

和以下 CSS:

.jumbotron {
  background-image:url("flight.jpg");
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom:0px;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #CC0000;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  text-shadow:none;
}

.jumbotron p {
  font-size: 20px;
  color: #CC0000;
  text-shadow:none;
}

当使用较大的显示器时，背景图像无法正确缩放，并且图像在 div 内的尺寸会增加，但 div 保持不变。结果看起来像是对图像进行了缩放，而不是图像保持完整。

知道如何让它在更大的显示器上正确缩放吗？

Answer 1

更改为

哦，很抱歉误解了你的问题，你需要编辑 的 css。jumbotron 需要被覆盖并居中。

.jumbotron { background-size: cover; background-position: center;  }

在 Jumbotron 周围添加 Container Div!

<div class="container">
    <div class="jumbotron">
        <div class="container">
            <h1>Heading</h1>
            <p>Tagline</p>
            <a href="#About"><button type="button" class="btn btn-lg btn-danger">Learn More</button></a>
            <!--<a href="#">Learn More</a>-->
        </div>
    </div>
</div>