CSS網頁制作技巧:圖片的自適應居中和兼容處理

前幾天在做騰訊微博的微賣場的時候，遇到需要做圖片居中的需求。也就是說，商品列表中的圖片需要居中顯示。因為圖片是賣家自己把商品圖片鏈接過來，商品圖片的大小沒有做限制和過濾。所以我們需要做的是，讓圖片在容器當中水平居中、垂直居中、圖片自適應容器大小。圖片原圖大小和在容器中顯示的大小有這樣的關系：

假設容器大小為200像素*200像素，圖片的寬為x 像素，高為y 像素，則：

當x<=200,y<=200時，圖片位於容器中的中間，即水平居中和垂直居中，顯示在容器的圖片大小為：寬=x，高=y ；

當x>200,y<=200時，顯示在容器中的圖片大小為：寬=200，高=200y/x ；

當x<=200,y>200時，顯示在容器中的圖片大小為：寬=200x/y，高=200 ；

當x>200,y>200，且x>y，顯示在容器中的圖片大小為：寬=200，高=200y/x ；

當x>200,y>200，且x<y，顯示在容器中的圖片大小為：寬=200x/y，高=200；

當x>200,y>200，且x=y，顯示在容器中的圖片大小為：寬=200，高=200 ；

為了更好地看到效果，先把圖片的原圖展示出來，以便和它在列表容器當中做對比。

x<=200,y<=200的圖片：

x>200,y<=200的圖片：

x<=200,y>200的圖片：

x>200,y>200，且x=y的圖片：

圖片自適應居中適用的場景有商品列表、相冊、搜索圖片結果列表等。如何使用靜態的方法實現這樣的效果呢？看了網上的一些方法，加上自己的一些說明，做了幾個demo，供大家參考。

使用透明圖片，在該圖片上設置背景圖。

這種方法適用於小圖片，即商品圖都比容器小，不需要縮放，加載狀態圖片可以使用這個方法。這個方法的局限性在於，商品圖片需要在服務器端過濾，或者先等比例縮小，再在浏覽器端顯示。

<div class="wrap_1"><a href=""><img style="background-image:url(100_100.jpg)" src="wrap_loading.png" alt=""  width="200" height="200"></a></div>

        /* 圖片的背景圖方式 */		.wrap_1 { width:200px; height:200px; border:1px solid red; }		.wrap_1 img { display:block; background-repeat:no-repeat; background-position:center; }        

查看demo

設置display為table-cell

在img外設置兩層div，最外層div的樣式設置為display:table-cell。因為IE6、7中對table-cell不支持，所以針對IE6、7，設置了position來實現居中。在IE8中，如果圖片本身的寬比容器的寬大，則容器寬度會被撐開，這裡使用針對IE8的width為200px處理。

<div class="wrap_2_outer"><div class="wrap_2_inner"><a href=""><img src="100_100.jpg" alt="" ></a></div></div>

/* table-cell方式 */.wrap_2_outer { border:1px solid red; width:200px; height:200px; display:table-cell; font-size:0; text-align:cente