1

divを次々に配置しようとしています。これは、divを比較的配置すると簡単に実現できますが、これらの各divをブラウザーのサイズに合わせて配置する必要があります。
私はこの方法を使用して非常に大まかにそれを達成しました：

<div id="container">
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div>
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div>
</div>

CSS：

#test-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#test-2 {
    position: absolute;
    top: 101%;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

したがって、＃test-1はブラウザのサイズに合わせて拡大縮小し、縮小すると＃test-2もブラウザのサイズに合わせて拡大縮小します。しかし、私はそれらを絶対的に配置し、＃test-2を上から101％に設定することでこれらを達成しました。これは、別のdivを追加するたびに実行したくないので、保持しながら比較的配置したい理由です。ブラウザの背景画像へのスケール。それが可能であれば？jQueryが必要でしょうか？
私はこれに完全に困惑しています！

これらの背景画像もdiv内にネストされているため、他にも理解できないことがありました。ブラウザのサイズが幅が約750ピクセルを下回ると、背景画像が固定されます。とにかく、常に中央にとどまることができます。ブラウザに、

4

2 に答える 2

0

背景画像を使用して何をしているのかよくわからないため、背景画像を使用していませんが、サイズの問題にjQueryを使用した解決策は次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style>
            .fill-browser{
                width:100%;
            }
        </style>
        <!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow -->
        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
        <script>
            $(function() {
                Resize();
            });

            //Every resize of window
            $(window).resize(function() {
                Resize();
            });

            //Dynamically assign height
            function Resize() {
                // Handler for .ready() called.
                var windowHeight = $(window).height() + 'px';
                $('.fill-browser').css('height', windowHeight);
            }
        </script>
    </head>

    <body>
        <div class="fill-browser" style="background-color:#aa0000;"></div>
        <div class="fill-browser" style="background-color:#00aa00;"></div>
        <div class="fill-browser" style="background-color:#0000aa;"></div>
    </body>
</html>
于 2013-01-23T00:31:22.853 に答える
0

http://srobbin.com/jquery-plugins/backstretch/これは背景画像を簡単に引き伸ばす ためのjQueryプラグインです。

于 2013-01-23T02:16:49.000 に答える