增加Bootstrap Jumbotron的高度但保持响应性

Question

我一直在尝试使用Bootstrap的Jumbotron来放置背景图片。非常简单易操作：

.jumbotron
{
    background: url('path/to/images/banner.jpg') no-repeat center center; 
    background-size: cover;
}

和

<div class="jumbotron">
    <div class="container">...</div>
</div>

它看起来很不错并且响应迅速。然而，Jumbotron只有内容所占空间那么大 - 而我的内容非常少。因此，它比我想象的要窄得多，我想增加其默认高度同时仍保持响应性。例如，像这样的东西是行不通的：

<div class="jumbotron">
    <div class="container" style="height: 600px;">...</div>
</div>

高度是正确的，但图片不再具有响应性。我一直在研究各种可用的混合/变量，希望能找到能够利用的内容，但我没有什么运气。

- JasCav

---

我不确定设置高度如何使其不响应。你能解释一下吗？ - isherwood

Answer 1

我会使用内边距来实现：

.jumbotron {
    ...
    padding: 5em inherit;
}

通过使用相对单位，它可以进行自适应缩放。

演示

或者，使用最小高度：

.jumbotron {
    ...
    min-height: 300px;
}

演示代码

这将允许元素在需要时进行扩展。

- isherwood

Answer 2

您可以使用 Jumbotron CSS 中的相对 padding-top 和相对 padding-bottom 来实现此目的：

    .jumbotron {
      background: url('http://placekitten.com/800/500') no-repeat center center;
      background-size: cover;
      padding-top: 20%;
      padding-bottom: 20%;
    }

<div class="jumbotron">
  <div class="container">
    <h1>Your Text Here!</h1>
  </div>
</div>

- Paul Jansen

Answer 3

以下代码适用于所有屏幕：

.jumbotron {
  background: url('backgroundimage.jpg') no-repeat center center fixed;
  padding-top: 20%;
  padding-bottom: 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

cover 属性将调整背景图像的大小，以覆盖整个容器，即使必须拉伸图像或在边缘略微裁剪一些。

- Dhanesh Agrawal

Answer 4

当您设置固定高度时，图像可能无法与容器很好地配合。您要么放弃纵横比，要么放弃图像的大小。最好的方法是在图像纵横比和容器大小之间找到一些共同点。如果使用background-image，情况会更加棘手，因为您需要完全依赖容器。

所以，不要用 background-size: cover;，而是尝试一些类似 background-size: contain; 的东西。试着调整一下它，看看图片怎么缩放。在实现一个好的背景图片之前，我经常需要做些数学计算。如果你的图片是 1200x600，你就可以相应地调整高度，因为你现在知道了宽高比是 2:1。这就是响应式设计的用武之地。你可以使用 @media() 查询来更改 .jumbotron 的高度，以反映主要屏幕尺寸。在某些情况下，你可能会出现溢出图片的情况，但至少不会太多，因为你已经确定了 .jumbotron 不会远离 2:1 比率。而 background-size: cover 则不关心图像如何缩放。它强制使其覆盖整个 .jumbotron，而不管图片的长宽比如何。你也可以实现一些 min-height，而不是固定高度，以确保 .jumbotron 不被强制成某个大小。

- Bwaxxlo

Answer 5

您可以使用以下代码来调整 jumbotron 的高度。

填充越大 -> 高度越大

填充越小 -> 高度越小

 .jumbotron {
    padding: 0.1em 0.1em;
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 1.2em;
        .btn {
            padding: 0.5em;
        }
    }
}

- Shipra Sharma