Question

我想让我的背景图像像幻灯片一样自动更改。但无论浏览器窗口的大小如何，我都希望图像能够填满背景......如果按比例缩小，图像的宽高比不会改变。

以下是我正在尝试做的一个例子：

http://www.thesixtyone.com/

我如何完成这些任务？任何帮助将不胜感激。

Answer 1

使用CSS3，您可以使用background-size属性。

background-size: contain; 缩放图像，同时保持其固有的宽高比（如果有的话），使其最大尺寸，使其宽度和高度都能适合背景定位区域。

Contain始终适合视口中的整个图像，只要背景图像和浏览器窗口的比例不同，就会在上下或左右留下不透明边框。

background-size: cover; 缩放图像，同时保持其固有的宽高比（如果有的话），使其最小尺寸，使其宽度和高度都可以完全覆盖背景定位区域。

Cover总是填满浏览器窗口，在此过程中切掉一些头发或耳朵，这是我个人在大多数情况下的首选。您可以使用background-position属性控制图像在视口中的对齐方式。

Answer 2

你不能，至少不像你现在想的那样。

但是，您可以执行的操作是创建<img>而使用css set position:absolute，将其缩放为100％宽度并使用overflow:hidden从父级裁剪

示例：http://jsfiddle.net/GHmz7/4/

Answer 3

您可以尝试使用jquery / js来更改背景图像：

<!doctype html>
<html>
    <head>
        <title>Width resolution</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 20px;
                font-family: arial,helvetica,sans-serif;
                font-weight: 700;
                color:#eee;
                text-shadow: 0px 0px 1px #999;
}
            div {
                width:auto;
                height:340px;
                border:#ccc groove 2px;
                padding:5px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('body').css({'background-color':'#ccc'});

                var sw = screen.width;

            function wres() {
                switch(sw) {
                    case 1920:
                        $('div').css({'background':'#192000 url(bg-1920.jpg)'});
                        $('body').css({'background':'#001920 url(bg-1920.jpg)'});
                        break;
                    case 1600:
                        $('div').css({'background':'#160000 url(bg-1600.jpg)'});
                        $('body').css({'background':'#001600 url(bg-1600.jpg)'});
                        break;
                    case 1280:
                        $('div').css({'background':'#128000 url(bg-1280.jpg)'});
                        $('body').css({'background':'#001280 url(bg-1280.jpg)'});
                        break;
                    case 1152:
                        $('div').css({'background':'#115200 url(bg-1152.jpg)'});
                        $('body').css({'background':'#001152 url(bg-1152.jpg)'});
                        break;
                    default:
                        $('div').css({'background':'#102400 url(bg-1024.jpg)'});
                        $('body').css({'background':'#001024 url(bg-1024.jpg)'});
                }
                    //alert(rsw);
                    //$('div').html(rsw);
                    $('.res').append(' '+sw);
                    $('div.res').css('width', 1920);
                }
                //alert(sw);
                wres();
            });
        </script>
    </head>
    <body>
        <h1 class="res">Resolução atual:</h1>
        <div class="res">The div</div>
    </body>
</html>

您可以为背景创建CSS类，并使用.toggleClass（）

Answer 4

您无法在所有浏览器/版本等中可靠地调整背景图像的大小......

您在thesixtyone.com网站上看到的效果是通过将正常的内嵌图像拉伸到占位符分区的100％容器来实现的。然后其他元素浮动在这个“背景”部分的顶部。

所以答案不是使用背景图片，而是让图像在占位符中填充屏幕，然后将其他元素放在其上面。

背景图像缩放同时保持纵横比

4 个答案: