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>
 

處理後，比較令人滿意，圖片沒變形，也能看到圖片的全貌。缺點是圖片會有一部分被截掉，不過不太影響大局。