图片尺寸与可视范围的关系

近来一直有小伙伴问到和背景图相关的问题，鉴于这帮家伙对小剧客栈大hen气low背景图的视而不见，今天我就来说说和背景图相关的处理方式。

假设一张图的尺寸为150px × 100px，显示区域为500px × 400px，那么作为背景显示就会有下面三种基本情况（不考虑重复、位置等因素）。

作为图片显示的三种基本方式，各自的特点如下。

normal：正常的显示方式，不缩放，常用来显示已知大小的icon或头像，可直接限定显示区域以呈现图片。

contain：在可视范围内完整显示图片，可视范围上下或左右两侧可能会有留白，用来展示需要表现图片细节的地方，如图片查看器。

cover：完全铺满可视范围，图片上下或左右两侧可能会有裁剪，常用来呈现比较大气的界面背景。

满屏效果的实现方式

上面介绍了图片尺寸与可视范围的三种基本关系，这里说下满屏背景效果是如何实现的。

首先创建一个与窗口等宽高的可视范围，这个视页面结构自己来定，总之一点，建议独立一个层，为针对IE的平稳退化做准备。

实现起来，css3真是前端的一大福音，在背景的设置上，css3新增了一个叫做background-size的属性，当值为cover时，配合background-position：center、background-repeat：no-repeat便会有上图的效果（background-size还可以指定像素，百分比，这里不讨论）。

近两年来，WEB对IE6、7的态度几乎不会再妥协了，然而在目前还不能放弃的IE8上，只能通过JS+img去模拟满屏效果了，下面是计算位置和尺寸的方法。

function newSizeAndPosition(boxW,boxH,imgW,imgH){
    //比较可视范围与图片的宽高比例
    if(boxW/boxH > imgW/imgH){
        return {
            'width':boxW,
            'height':boxW*imgH/imgW,
            'marginTop':-(boxW*imgH/imgW-boxH)/2,
            'marginLeft':0
        };
    }else{
        return {
            'width':boxH*imgW/imgH,
            'height':boxH,
            'marginTop':0,
            'marginLeft':-(boxH*imgW/imgH-boxW)/2
        };
    }
}