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

实例