Bootstrap 3和響應性背景圖片？

Question

我正在嘗試使用具有多個全角背景圖像的Bootstrap創建一個響應式站點。

這是它的外觀模型：

想法是讓每個圖像拉伸到瀏覽器窗口的寬度，然后將高度相應縮放以保留寬高比。

我已經完成了現在的工作：

http://jsfiddle.net/SeFVV/

目前，我有多個<section>標記，並且要設置一個背景圖片，其background-size: cover每一個都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;*/
    }

作為一種技巧，我為每個參數設置了最小寬度，因此它沒有真正的響應能力。

如果我未設置min-height，那么每個容器都會縮小以適合內部元素，這不是我想要的。

在上一個問題中，建議使用多個Bootstrap容器的答案-您是要正常使用多個容器div嗎？ 另外，該答案並沒有真正涵蓋如何使其具有響應性，因此寬度將合適，並且高度將縮放以保留縱橫比。

Answer 1

您可以通過將html和body標簽的高度添加到100％，以及頁面的section標簽（要填充背景圖像的位置）中，使用窗口的動態高度。

例：

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

現場例子