Question

我正在尝试将div放在另一个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插件，可以轻松地拉伸背景图像。

相对定位与响应式设计

2 个答案: