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

【问题标题】：Increasing Height of Bootstrap Jumbotron but Remaining Responsive增加 Bootstrap Jumbotron 的高度但保持响应
【发布时间】：2015-05-20 02:31:56
【问题描述】：

我一直在使用Bootstrap's 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>

这是正确的高度，但图像不再响应。我一直在研究可供我使用的各种混合/变量，希望能弹出一些我可以利用的东西，但我没有任何运气。

【问题讨论】：

我不确定如何设置高度使其无响应。你能澄清一下吗？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

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

更大的填充 -> 更大的高度

内边距变小 -> 高度变小

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

【讨论】：

【解决方案2】：

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

.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 属性将调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点。

【讨论】：

【解决方案3】：

您可以通过在 jumbotron css 中使用 relative padding-top 和 relative 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>

【讨论】：

【解决方案4】：

当您管理固定高度时，图像将无法与容器很好地配合。您要么放弃图像的纵横比或大小。最好的方法是在图像纵横比和容器大小之间找到一些共同点。这在使用background-image 时更加棘手，因为您依赖容器来处理所有事情。

所以，不要掩饰，试试background-size: contain; 之类的东西。玩弄它以确定图像的缩放方式等。在实现一个好的 bg-image 之前，我通常需要做一些数学运算。所以，如果你的图片是1200x600，你可以相应地调整高度，因为你现在知道你的宽高比是2:1。这就是响应式设计的用武之地。您可以使用@media() 查询更改.jumbotron 高度以反映主要屏幕尺寸。在某些时候，您会溢出图像，但至少不会溢出太多，因为您已经确定.jumbotron 不会与2:1 比率相差太远。 background-size: cover 不关心图像的缩放比例。无论图像的纵横比如何，它都会强制它覆盖整个.jumbotron。您还可以实现一些min-height 而不是固定高度，以确保.jumbotron 不会被强制为特定大小。

【讨论】：

【解决方案5】：

我会用填充来做：

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

通过使用相对单位进行缩放。

Fiddle demo

或者，使用最小高度：

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

Fiddle demo

这允许元素在需要时展开。

【讨论】：