Question

所以这个网站：

http://www.atomicdust.com/

他们在每个页面上都有背景图像，但在缩放时，它不会改变。更不用说它加载的速度有多快。如何在没有背景图像的情况下进行内容缩放？我能理解它是否是重复的图像，但事实并非如此。

Answer 1

在该网站上看起来好像是由一个脚本完成的，正如@rownage观察到的那样，但我已经在现代浏览器中使用（CSS3）“cover”属性成功完成了它，即background-size: cover;根据我的说法注释（欢迎评论！）this A List Apart article是我从中获取信息的地方。

在我的（非常在进行中！）照片网站上，此刻looks like this。放大我尝试的浏览器时，背景保持相同的大小。虽然如果Internet Explorer无法应对它，我不会感到惊讶。

关于如何快速该网站上的图片加载，这个技巧只是一个很好的可压缩图像选择，压缩得很好。 The background that loaded when I visited their site是1024x680像素，但由于它主要是黑色和白色，有大面积的纯色区域，因此压缩到相当小的74KB。

Answer 2

它使用jQuery和：

$.fn.bgResize = function(options) {

    var defaults = {  
        imageWidth: 800,
        imageHeight: 600
    };

    var options = $.extend(defaults, options);

    var obj = $(this);

    var initHtml = obj.html();

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    obj.height(windowHeight);
    obj.width(windowWidth);
    $('#work-wrapper').height(windowHeight);
    $('#work-wrapper').width(windowWidth);

    obj.html('<div id="inner-bg">'+initHtml+'</div>');

    $('#inner-bg img').each(function(){
        $(this).css({'display' : 'block', 'width' : '100%', 'height' : '100%'})                              
    });

    function doResize(){

        var screenheight = $(window).height();
        var screenwidth = $(window).width();

        var imageheight = options.imageheight;
        var imagewidth = options.imagewidth;

        var ratio = imagewidth/imageheight;

        var testwidth = screenheight * ratio;
        var testheight = screenwidth / ratio;

        obj.height(screenheight);
        obj.width(screenwidth);
        $('#work-wrapper').height(screenheight);
        $('#work-wrapper').width(screenwidth);

        if (testheight < screenheight){
            obj.children('#inner-bg').width(testwidth);
            obj.children('#inner-bg').height(testwidth/ratio);
            var finalheight = Math.round(testwidth/ratio);
            var finalwidth = testwidth;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else if (testheight > screenheight){
            obj.children('#inner-bg').height(testheight);
            obj.children('#inner-bg').width(testheight * ratio);
            var finalwidth = Math.round(testheight * ratio);
            var finalheight = testheight;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else {}

        obj.children('#inner-bg').css("top", -topoffset);
        obj.children('#inner-bg').css("left", -leftoffset);

    }

    doResize();

    $(window).resize(function(){
        doResize();
    });


    return this;

};

这个背景图像如何工作？

2 个答案: