Bootstrap 3和响应背景图像？

Question

我正在尝试使用具有多个全宽背景图像的Bootstrap创建响应式网站。

以下是它应该如何显示的模型：

我们的想法是将每个图像拉伸到浏览器窗口的宽度，然后相应地缩放高度以保持纵横比。

我已经提出了一个我现在所掌握的JSFiddle：

http://jsfiddle.net/SeFVV/

目前，我有多个<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;*/
    }

作为一个黑客，我为每个人设置了最小宽度，所以它并没有真正响应。

如果我没有设置最小高度，那么每个都缩小以适应内部元素，这不是我想要的。

在上一个问题中，建议使用多个Bootstrap容器的答案 - 您是否准备通常使用多个容器div？此外，答案并没有真正涵盖如何使其响应，以便宽度适合，并且高度将缩放以保持纵横比。

Answer 1

您可以通过添加到100％的html和body标签高度以及页面的部分标记（您要在其中展示背景图像）来使用窗口的动态高度。

示例：

html,body,section{height:100%;}

Live Example