Question

我一直在玩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>

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

Answer 1

我用填充来做：

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

通过使用相对单位，它可以缩放。

<强> Fiddle demo

或者，使用最小高度：

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

<强> Fiddle demo

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

Answer 2

你可以通过在jumbotron css中使用相对填充顶部和相对填充底部来实现这一点：

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

Answer 3

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

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

Answer 4

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

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

封面属性会调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从其中一个边缘切掉一点。

Answer 5

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

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

较小的填充->较小的高度

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

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

5 个答案: