6

複数の全幅の背景画像を持つ 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;*/
    }

ハックとして、それぞれに最小幅を設定しているため、実際には応答しません。

min-height を設定しないと、各要素が内部の要素に合わせて単純に縮小されますが、これは私が望むものではありません。

前の質問では、複数の Bootstrap コンテナーを使用することを提案した回答がありました。通常、複数のコンテナー div を使用するつもりですか? また、その答えは、レスポンシブにする方法を実際にはカバーしていないため、幅が収まり、縦横比を維持するために高さがスケーリングされます。

4

1 に答える 1

2

html と body タグに 100% の高さを追加し、ページのセクション タグ (背景画像を貼り付ける場所) を追加することで、ウィンドウの動的な高さを使用できます。

例：

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

実際の例

于 2013-12-21T21:27:37.180 に答える