html - Bootstrap 3 和响应式背景图片？

Question

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

这是它的外观模型:

想法是让每张图片都拉伸(stretch)到浏览器窗口的宽度，然后相应地缩放高度以保持纵横比。

我已经把我现在得到的东西放在了一个 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;*/
    }

作为 hack，我为每个设置了最小宽度，所以它并不是真正的响应。

如果我不设置最小高度，那么每个元素都会简单地缩小以适应里面的元素，这不是我想要的。

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

Answer 1

您可以通过添加 100% 的 html 和 body 标签高度以及页面的部分标签(您想要拉伸(stretch)背景图像的位置)来使用动态窗口高度。

例子:

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

Live Example