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

 很多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>

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