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

更改为

哦，我为误解你的问题而道歉，你需要编辑.jumbotron的css需要覆盖并定位到中心位置。

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

Answer 2

更新2： This is helpful link.我认为，你在jQuery中的解决方案。

更新：这是解决方案。

background: url("flight.jpg") no-repeat center center;
height: 500px;
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 0px;
}

您可以使用@media这样的查询：

    @media (max-width: 768px) {
      .btn-responsive {
        padding:2px 4px;
        font-size:11px;
        line-height: 1;
        border-radius:3px;
      }
    }

    @media (min-width: 769px) and (max-width: 992px) {
      .btn-responsive {
        padding:4px 9px;
        font-size:12px;
        line-height: 1.2;
      }
    }

使用@media查询，您可以为不同的CSS编写不同的CSS代码   媒体类型。

当您需要针对不同媒体类型的不同布局时，这会有所帮助   例如屏幕或打印机，但也需要不同的布局   对于不同的设备，这在制作网页时非常有用   响应式设计。

当用户调整浏览器大小时，您也可以使用不同的布局   窗口向上或向下到一定宽度或高度。

More info.

如何在更大的显示器上扩展jumbotron bootstrap？

2 个答案: