响应式设计的相对定位

Question

我正在尝试一个接一个地定位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中，当浏览器的宽度小于750px时，背景图片就会变得固定，有没有办法让它们始终保持在浏览器的中心，基本上使浏览器左侧的图像溢出？

Answer 1

我没有使用背景图片，因为我真的不确定你在用它们做什么，但这里有一个使用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>

Answer 2

你可能还想看看- http://srobbin.com/jquery-plugins/backstretch/，这是一个可以轻松拉伸背景图片的jQuery插件。