twitter-bootstrap Bootstrap 3 和响应式背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18810848/
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
Bootstrap 3 and Responsive Background Images?
提问by victorhooi
I'm trying to create a responsive site using Bootstrap that has multiple full-width background images.
我正在尝试使用具有多个全宽背景图像的 Bootstrap 创建响应式站点。
Here's a mockup of how it should look:
这是它的外观模型：
The idea is for each image to stretch to the width of the browser window, and then the height to be scaled accordingly to preserve the aspect ratio.
这个想法是让每个图像拉伸到浏览器窗口的宽度，然后相应地缩放高度以保持纵横比。
I've put up a JSFiddle of what I've got right now:
我已经提出了我现在所拥有的 JSFiddle：
Currently, I've got multiple <section>tag, and I'm setting a background image with background-size: coveron each:
目前，我有多个<section>标签，并且background-size: cover每个标签都设置了背景图像：
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
As a hack, I'm setting min-width for each so it's not really responsive.
作为一个黑客，我正在为每个设置最小宽度，所以它不是真正的响应。
If I don't set min-height, then each simply shrinks to fit the elements inside, which is not what I want.
如果我不设置 min-height，那么每个都会简单地缩小以适应里面的元素，这不是我想要的。
In a previous question, the answer suggested using multiple Bootstrap containers - are you meant to have multiple container divs normally? Also, that answer didn't really cover how to make it responsive, so that the width would fit, and the heigh would scale to preserve aspect ratio.
在上一个问题中，答案建议使用多个 Bootstrap 容器 - 您通常打算拥有多个容器 div 吗？此外，该答案并未真正涵盖如何使其具有响应性，以便宽度适合，并且高度将缩放以保持纵横比。
采纳答案by Elad Shechter
You can use dynamic height of window by adding to your html and body tag height of 100%, and the section tags of the page(where you want to streach the background images).
您可以通过将 html 和 body 标签高度添加到 100% 以及页面的 section 标签（要拉伸背景图像的位置）来使用窗口的动态高度。
Example:
例子：
html,body,section{height:100%;}
