保持宽高比的情况下缩放背景图片

24

我希望我的背景图片能像幻灯片一样自动切换。但是我希望这些图片可以填满整个背景,无论浏览器窗口的大小如何...并且如果缩小窗口,图片的宽高比不会改变。

以下是我试图实现的示例:

http://www.thesixtyone.com/

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


2
请注意:链接中的网站已于2014年7月关闭。 - dav_i
正如@drudge在下面提到的,background-image: contain就足以实现这种效果。 - Will Schoenberger
刚刚意识到我在上面的评论中犯了一个错误...你想要使用background-image: cover。IOS Safari有两个已知问题http://caniuse.com/#search=background-image。 - Will Schoenberger
4个回答

85

通过CSS3,你可以使用background-size属性。

background-size: contain;将图像按比例缩放,以最大尺寸适合背景定位区域为止,并保留其固有的纵横比(如果有的话)。

Contain始终将整个图像适配到你的视口内,在背景图像和浏览器窗口的比例不同时,会在顶部/底部或左侧/右侧留下不透明的边框。

background-size: cover;将图像按比例缩放,以最小尺寸完全覆盖背景定位区域,并保留其固有的纵横比(如果有的话)。

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


1
感谢您对background-size属性进行详细的解释。 - rxgx
2
对于那些好奇的人,这个选项在 caniuse 页面中有相当良好的覆盖范围。http://caniuse.com/#feat=background-img-opts - Jonathan Dumaine

13
你现在至少不能像你试图做的那样实现。
然而,你可以创建一个,并使用CSS设置position:absolute,将其缩放到100%宽度,并使用overflow:hidden从父级裁剪它。
示例:http://jsfiddle.net/GHmz7/4/

如何使它在页面上的所有其他元素后面?z值? - Sev
你的示例在调整浏览器大小时拉伸了图像的宽度(改变了长宽比)。我不希望长宽比发生变化...就像我上面链接的示例一样。 - Sev
2
宽高比没有改变。 它是按比例拉伸宽度和高度。 如果您使用更高分辨率的图像,则会看起来很好,我只是使用了低分辨率的谷歌标志 :) - user578895
好的,最后一个问题...为什么它没有填满整个页面,只有那个矩形框?我该如何修复它,使其填满整个页面? - Sev
那只是我创建的 div 的高度...我更新了示例。 - user578895

2
你可以尝试使用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()。

1
为什么要使用js,当你可以简单地使用css媒体查询呢? - Adrian Enriquez

0

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

在thesixtyone.com网站上看到的效果是通过将普通内联图像拉伸到其容器的100%来实现的,该容器是一个占位符分区。然后,其他元素浮动在此“背景”部分的顶部。

因此,答案不是使用背景图像,而是使图像填充占位符屏幕,然后将其他元素放在其上方。


1
考虑删除此答案,因为自2011年以来情况已经发生了变化。CSS3通过background-size实现了这一点。 - DalSoft

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接