前幾天在做騰訊微博的微賣(mài)場(chǎng)的時(shí)候,遇到需要做圖片居中的需求。也就是說(shuō),商品列表中的圖片需要居中顯示。因?yàn)閳D片是賣(mài)家自己把商品圖片鏈接過(guò)來(lái),商品圖片的大小沒(méi)有做限制和過(guò)濾。所以我們需要做的是,讓圖片在容器當(dāng)中水平居中、垂直居中、圖片自適應(yīng)容器大小。圖片原圖大小和在容器中顯示的大小有這樣的關(guān)系:
假設(shè)容器大小為200像素*200像素,圖片的寬為x 像素,高為y 像素,則:
當(dāng)x<=200,y<=200時(shí),圖片位于容器中的中間,即水平居中和垂直居中,顯示在容器的圖片大小為:寬=x,高=y ;
當(dāng)x>200,y<=200時(shí),顯示在容器中的圖片大小為:寬=200,高=200y/x ;
當(dāng)x<=200,y>200時(shí),顯示在容器中的圖片大小為:寬=200x/y,高=200 ;
當(dāng)x>200,y>200,且x>y,顯示在容器中的圖片大小為:寬=200,高=200y/x ;
當(dāng)x>200,y>200,且x<y,顯示在容器中的圖片大小為:寬=200x/y,高=200;
當(dāng)x>200,y>200,且x=y,顯示在容器中的圖片大小為:寬=200,高=200 ;
為了更好地看到效果,先把圖片的原圖展示出來(lái),以便和它在列表容器當(dāng)中做對(duì)比。
x<=200,y<=200的圖片:
x>200,y<=200的圖片:
x<=200,y>200的圖片:
x>200,y>200,且x=y的圖片:
圖片自適應(yīng)居中適用的場(chǎng)景有商品列表、相冊(cè)、搜索圖片結(jié)果列表等。如何使用靜態(tài)的方法實(shí)現(xiàn)這樣的效果呢?看了網(wǎng)上的一些方法,加上自己的一些說(shuō)明,做了幾個(gè)demo,供大家參考。
使用透明圖片,在該圖片上設(shè)置背景圖。
這種方法適用于小圖片,即商品圖都比容器小,不需要縮放,加載狀態(tài)圖片可以使用這個(gè)方法。這個(gè)方法的局限性在于,商品圖片需要在服務(wù)器端過(guò)濾,或者先等比例縮小,再在瀏覽器端顯示。
<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
設(shè)置display為table-cell
在img外設(shè)置兩層div,最外層div的樣式設(shè)置為display:table-cell。因?yàn)镮E6、7中對(duì)table-cell不支持,所以針對(duì)IE6、7,設(shè)置了position來(lái)實(shí)現(xiàn)居中。在IE8中,如果圖片本身的寬比容器的寬大,則容器寬度會(huì)被撐開(kāi),這里使用針對(duì)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
用與圖片并列的一個(gè)空標(biāo)簽
設(shè)置了空標(biāo)簽的高,使得與它并列的。
<div><a href=""><img src="100_100.jpg" alt="" ></a><i></i></div>
/* 空標(biāo)簽 */
.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
設(shè)置行高line-height
對(duì)圖片容器設(shè)置行高為容器的高。
<div> <img src="400_300.jpg" alt="" > </div>
/* 設(shè)置行高 */
.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
以上實(shí)現(xiàn)的效果為:
IE6的杯具
對(duì)于圖片的自適應(yīng),使用max-width和max-height。冷酷無(wú)情的現(xiàn)實(shí)就是IE6及以下不支持max-width和max-height。以上用于修復(fù)IE6中max-height,max-width的表達(dá)式_width和 _height,在運(yùn)行時(shí)還存在小問(wèn)題。用不同的圖片試了一下,對(duì)于寬和高至少一個(gè)值小于或等于200的圖片,能夠完美地展示,但是若寬和高兩者都大于200,則會(huì)出現(xiàn)一些小問(wèn)題。
若_width和_height兩者一起使用,x>200,y>200,且x>y的圖片,會(huì)顯示理想的狀態(tài)。x>200,y>200,且x<y的圖片,會(huì)顯示為200*200的大小,但是沒(méi)有按比例縮放:(。
若_width、_height單獨(dú)使用,則能夠使對(duì)應(yīng)的圖片顯示為理想狀態(tài)。如僅使用_width,能對(duì)橫圖起作用,對(duì)豎圖不起作用。
反之,如僅使用_height,能對(duì)豎圖起作用,對(duì)橫圖不起作用。
結(jié)論是,_width和_height都寫(xiě)上,這樣做有95%完美了。另外對(duì)CSS Expression的性能做優(yōu)化,貓哥做了詳盡的分析供大家參考。針對(duì)IE6加上_width: expression(function(el){el.style.width = el.offsetWidth > 200 ? ’200px’ : el.offsetWidth + ‘px’;counter(’2′);}(this));這句。
新聞標(biāo)題:CSS網(wǎng)頁(yè)制作技巧
分享URL:http://m.rwnh.cn/news27/320877.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)