用background-size实现 背景图片自适应浏览器大小,但不变形

来源:互联网 发布:windows 性能监视器 编辑:程序博客网 时间:2024/03/29 18:46
 很多flash站都用到了一张背景图,然后根据浏览器大小自动缩放,但图片不变形。
在CSS3中,有属性:
background-size: cover;  //只支持IE9+-webkit-background-size: cover; //webkit核心-moz-background-size: cover; //FF核心-o-background-size: cover; //应该是Opera核心吧,反正不是IE的,就先不管它了

以上几个css3属性都可以很好的支持根据浏览器大小自适应大小

下面看看效果:

1. 采用直接显示图片列表的方式:

<img src='...' style='width:100px; height:100px; border:1px solid #def;' />

可见,在原图宽高比不是1:1的情况下,图片就会变形。而且在图片上层加上其他效果,如删除等弹出层很不方便。

2. 采用背景的方式:

<div  style='background:url(...) no-repeat; width:100px; height:100px; border:1px solid #def;'></div>

图像不变形了,但是大图就看不到图像的全貌了:



3. 采用 background-size实现智能平铺:

<div  style='background:url(...) no-repeat; width:100px; height:100px; border:1px solid #def;background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;'> </div>

处理后,比较令人满意,图片没变形,也能看到图片的全貌。缺点是图片会有一部分被截掉,不过不太影响大局。


0 0