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

假設容器大小為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><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><div><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:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; } .wrap_2_inner { text-align:center; vertical-align:middle; width:200px9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;} .wrap_2_inner img { max-height:200px; max-width:200px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;} ??????? 查看demo

用與圖片并列的一個空標簽 設置了空標簽的高，使得與它并列的。

<div><a href=""><img src="100_100.jpg" alt="" ></a><i></i></div> /* 空標簽 */ .wrap_3 { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid red;? } .wrap_3 i { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; } .wrap_3 img { vertical-align:middle; max-height:200px; max-width:200px; } ??????? 查看demo

設置行高line-height 對圖片容器設置行高為容器的高。

<div> <img src="400_300.jpg" alt="" > </div> /* 設置行高 */ .wrap_4 { width:200px; height:200px; text-align:center; border:1px solid red; font-family: arial; line-height:198px; font-size:0; _font-size:180px; } .wrap_4 img { display:inline-block; vertical-align:middle; max-height:200px; max-width:200px; } ??????? 查看demo

以上實現的效果為：

IE6的杯具 對于圖片的自適應，使用max-width和max-height。冷酷無情的現實就是IE6及以下不支持max-width和max-height。以上用于修復IE6中max-height,max-width的表達式_width和 _height，在運行時還存在小問題。用不同的圖片試了一下，對于寬和高至少一個值小于或等于200的圖片，能夠完美地展示，但是若寬和高兩者都大于200，則會出現一些小問題。

若_width和_height兩者一起使用，x>200,y>200，且x>y的圖片，會顯示理想的狀態。x>200,y>200，且x<y的圖片，會顯示為200*200的大小，但是沒有按比例縮放：（。

若_width、_height單獨使用，則能夠使對應的圖片顯示為理想狀態。如僅使用_width，能對橫圖起作用，對豎圖不起作用。

反之，如僅使用_height，能對豎圖起作用，對橫圖不起作用。

結論是，_width和_height都寫上，這樣做有95%完美了。另外對CSS Expression的性能做優化，貓哥做了詳盡的分析供大家參考。針對IE6加上_width: expression(function(el){el.style.width = el.offsetWidth > 200 ? ’200px’ : el.offsetWidth + ‘px’;counter(’2′);}(this));這句。

當前題目：圖片的自適應居中和兼容處理
轉載注明：http://www.js-pz168.com/news17/324767.html

成都網站建設公司_創新互聯，為您提供軟件開發、企業建站、服務器托管、網站內鏈、商城網站、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯