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

时间:2014-7-3 作者:剧中人

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

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

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

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

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

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

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



满屏效果的实现方式

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

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

实现起来,css3真是前端的一大福音,在背景的设置上,css3新增了一个叫做background-size的属性,当值为cover时,配合background-position:centerbackground-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
        };
    }
}