Html 增加 Bootstrap Jumbotron 的高度但保持响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29102884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increasing Height of Bootstrap Jumbotron but Remaining Responsive
提问by JasCav
I have been playing around with Bootstrap's Jumbotronto place a background image. Extremely simple to do:
我一直在玩Bootstrap 的 Jumbotron来放置背景图像。做起来非常简单：
.jumbotron
{
background: url('path/to/images/banner.jpg') no-repeat center center;
background-size: cover;
}
and
和
<div class="jumbotron">
<div class="container">...</div>
</div>
It looks great and is responsive. However, the Jumbotron is only as large as the content inside it - of which I have very little. As a result, it is far thinner than I would like and I would like to increase its default height while still maintaining the responsiveness. So, for example, something like this doesn't work:
它看起来很棒并且反应灵敏。但是，Jumbotron 的大小仅与其中的内容一样大 - 我所拥有的内容很少。结果，它比我想要的要薄得多，我想增加它的默认高度，同时仍然保持响应能力。因此，例如，这样的事情不起作用：
<div class="jumbotron">
<div class="container" style="height: 600px;">...</div>
</div>
It's the right height, but the image is no longer responsive. I have been looking into the various mixins/variables available to me hoping that something would pop out that I could leverage, but I'm not having any luck.
这是正确的高度，但图像不再响应。我一直在研究可用的各种混合/变量，希望能出现一些我可以利用的东西，但我没有任何运气。
回答by isherwood
I'd do it with padding:
我会用填充来做：
.jumbotron {
...
padding: 5em inherit;
}
By using relative units it scales.
通过使用相对单位，它可以缩放。
Alternatively, use a minimum height:
或者，使用最小高度：
.jumbotron {
...
min-height: 300px;
}
This allows the element to expand if needed.
这允许元素在需要时扩展。
回答by Paul Jansen
You can achieve this by using relative padding-top and relative padding-bottom in the jumbotron css:
您可以通过在 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>回答by Dhanesh Agrawal
The below code works for all the screens :
以下代码适用于所有屏幕：
.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;
}
The cover property will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
cover 属性将调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或切掉一个边缘。
回答by Shipra Sharma
You can use below code to adjust height of jumbotron.
您可以使用下面的代码来调整大屏幕的高度。
greater the padding -> greater the height
填充越大 -> 高度越大
smaller the padding -> smaller the height
填充更小 -> 高度更小
.jumbotron {
padding: 0.1em 0.1em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
回答by Bwaxxlo
When you administer a fixed height, the image won't really play well with the container. You either forgo aspect ratio or size of the image. The best way is to find some common ground between your image aspect ratio and the size of the container. This is even more trickier when using background-imagebecause you are relying on the container for everything.
当您管理一个固定的高度时，图像将不能很好地与容器配合使用。您要么放弃图像的纵横比或大小。最好的方法是在图像纵横比和容器大小之间找到一些共同点。这在使用时更加棘手，background-image因为您依赖容器来处理所有事情。
So, instead of cover, try something like background-size: contain;. Play around with it to determine how the image scales and the likes. I usually have to do some maths before implementing a good bg-image. So, if your image is 1200x600, you can make the height adjust accordingly because you now know that the ratio between your width and height is 2:1. Here's where the responsive design comes in. You can change your .jumbotronheight using @media()queries to reflect major screen sizes. At some point, you will overflow the image but at least it won't be by much because you have established that the .jumbotronwon't go too far from the 2:1ratio. background-size: coverdoesn't care how the image scales. It forces it to cover the entire .jumbotronregardless of the image's aspect ratio. You can also implement some min-heightinstead of fixed height to ensure the .jumbotronisn't forced to be a certain size.
因此，请尝试使用类似background-size: contain;. 使用它来确定图像的缩放方式等。在实现一个好的 bg-image 之前，我通常必须做一些数学运算。因此，如果您的图像是1200x600，您可以相应地调整高度，因为您现在知道宽度和高度之间的比率是2:1。这就是响应式设计的用武之地。您可以.jumbotron使用@media()查询更改高度以反映主要屏幕尺寸。在某些时候，您会溢出图像，但至少它不会太多，因为您已经确定.jumbotron不会偏离2:1比例太远。background-size: cover不关心图像如何缩放。.jumbotron无论图像的纵横比如何，它都会强制它覆盖整个区域。你也可以实现一些min-height而不是固定高度，以确保.jumbotron不会被强制为特定大小。
