[[188442]]

在網(wǎng)頁(yè)設(shè)計(jì)中，隨著響應(yīng)式設(shè)計(jì)的到來(lái)，各種響應(yīng)式設(shè)計(jì)方案層出不窮。對(duì)于圖片響應(yīng)式的問(wèn)題也有很多前端開(kāi)發(fā)人員在進(jìn)行研究。比較好的圖片響應(yīng)式設(shè)想便是在不同的屏幕分辨率下使用不同實(shí)際尺寸的圖片，而達(dá)到在高速網(wǎng)絡(luò)環(huán)境中使用大或超大高清圖片，在低速網(wǎng)絡(luò)或需要替用戶節(jié)省流量資源的環(huán)境中使用小而清晰的圖片，保證用戶無(wú)論在何種環(huán)境下都能有良好的瀏覽體驗(yàn)。然而這是一個(gè)龐大而具有挑戰(zhàn)的工作，我這里不做這個(gè)討論，因?yàn)槲夷壳斑€沒(méi)有這方面很好的實(shí)踐。這里我是要跟大家討論下同一張圖片在不同寬度的顯示區(qū)域中的顯示問(wèn)題。

問(wèn)題描述

我們先來(lái)看下我想要描述的問(wèn)題。首先我準(zhǔn)備了三張寬度不同的圖片，讓他們垂直排列在頁(yè)面中，除了去除圖片本身在垂直方向上產(chǎn)生的間距，不做其他任何樣式處理，這種情況我們通常在博文中經(jīng)?？吹剑趯?xiě)博文的時(shí)候經(jīng)常用到，具體效果請(qǐng)看：圖片寬度自適應(yīng)(1)(http://sandbox.runjs.cn/show/wxqdsnmx)。簡(jiǎn)單看下我們的頁(yè)面結(jié)構(gòu)：

<img src="imgs/560x200.jpg" alt=""><br> 
 
<img src="imgs/440x200.jpg" alt=""><br> 
 
<img src="imgs/300x200.jpg" alt="">  

為了方便查看效果，我們直接調(diào)整瀏覽器寬度來(lái)測(cè)試。測(cè)試效果如下gif圖所示： 

我們不難發(fā)現(xiàn)，在我們改變窗口可視區(qū)域的時(shí)候，圖片寬度并不會(huì)隨之變化，以至于在小屏幕中我們只能開(kāi)到圖片的一部分，這是很多人所不樂(lè)見(jiàn)的，因?yàn)檫@極有可能會(huì)導(dǎo)致重要信息丟失。那么這個(gè)問(wèn)題如何解決?

簡(jiǎn)單嘗試

為了保證信息顯示完整，保證圖片隨可視區(qū)域?qū)挾茸兓鴮挾茸赃m應(yīng)，我直接給圖片標(biāo)簽設(shè)置了寬度100%，具體效果請(qǐng)看：圖片寬度自適應(yīng)(2)(http://sandbox.runjs.cn/show/enkmkdfb)。

和示例一一樣，我們還是手動(dòng)改變可視區(qū)域?qū)挾葋?lái)觀看圖片的表現(xiàn)： 

現(xiàn)在看來(lái)圖片是可以根據(jù)可視區(qū)域?qū)挾茸赃m應(yīng)了，但是問(wèn)題來(lái)了：首先，所有圖片不論原始大小寬窄一律以可是區(qū)域?qū)挾葹闃?biāo)準(zhǔn)了，齊刷刷的一刀切，毫無(wú)美感;其次，當(dāng)較寬顯示區(qū)域顯示較窄圖片時(shí)，圖片出現(xiàn)嚴(yán)重失真，甚至失去識(shí)別度。好吧，窄屏的問(wèn)題解決了，寬屏的問(wèn)題有來(lái)了，不知道這是要鬧哪樣!但是問(wèn)題出來(lái)了，我們總要想辦法去解決啊，那怎么辦呢?

兵來(lái)將擋，水來(lái)土掩

是問(wèn)題，總有解決的辦法，只是成本高低的問(wèn)題。對(duì)于上面這個(gè)問(wèn)題我思考了許久，剛開(kāi)始我想使用width: 100%;max-width: 圖片寬度; 來(lái)處理，但是，我發(fā)現(xiàn)圖片寬度并不統(tǒng)一，max-width需要針對(duì)每一個(gè)寬度去設(shè)置，那根本不可行，無(wú)疑是自找麻煩，因?yàn)閷?shí)際應(yīng)用中，我們完全無(wú)法預(yù)知用戶將使用多大寬度的圖片。所以似乎單從控制圖片樣式已經(jīng)找不到什么解決辦法了，但是我開(kāi)始關(guān)注 width:100%; 的問(wèn)題。

我們知道，在CSS中，寬度的百分比是是相對(duì)于父級(jí)容器寬度的。如果我們能有辦法控制圖片標(biāo)簽的父容器的寬度，那問(wèn)題是不是就解決了呢?

首先，為了讓圖片標(biāo)簽有可控的父元素，我們先對(duì)代碼結(jié)構(gòu)做一點(diǎn)點(diǎn)調(diào)整：

<div class="img-wrap"> 
 
<img src="imgs/560x200.jpg" alt=""> 
 
</div> 
 
<div class="img-wrap"> 
 
<img src="imgs/440x200.jpg" alt=""> 
 
</div> 
 
<div class="img-wrap"> 
 
<img src="imgs/300x200.jpg" alt=""> 
 
</div>  

好了，接下來(lái)就是如何控制img-wrap元素的寬度的問(wèn)題了。我首先想到的是浮動(dòng)(float)，因?yàn)槲覀冎栏?dòng)元素的寬度是隨內(nèi)容變化的，所以我先給img-wrap設(shè)置了如下樣式：

.img-wrap {float: left;} 

但是，問(wèn)題又來(lái)了，浮動(dòng)元素會(huì)破壞原有的布局，如果不做清除浮動(dòng)處理，會(huì)導(dǎo)致后面的內(nèi)容緊跟在浮動(dòng)元素之后。所以為了保證不影響其他內(nèi)容，我們還得在img-wrap外面加一個(gè)容器來(lái)控制浮動(dòng)與否：

<div class="row"> 
 
<div class="img-wrap"> 
 
<img src="imgs/560x200.jpg" alt=""> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
<div class="img-wrap"> 
 
<img src="imgs/440x200.jpg" alt=""> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
<div class="img-wrap"> 
 
<img src="imgs/300x200.jpg" alt=""> 
 
</div> 
 
</div>  

好吧，現(xiàn)在我們?cè)趤?lái)看看，被折騰成什么樣子了，圖片寬度自適應(yīng)(3)(http://sandbox.runjs.cn/show/eknk80m9) 

哈哈，好像是我想要的效果了。但是，作為一個(gè)有點(diǎn)強(qiáng)迫癥的開(kāi)發(fā)者，雖然達(dá)到了我想要的效果，但加了那么多層嵌套標(biāo)簽，總讓我感覺(jué)不舒服。于是，我繼續(xù)折騰，終于我恍然大悟， display:inline-block 的元素寬度也是隨內(nèi)容變化的，而且圖片默認(rèn)樣式恰巧也表現(xiàn)為inline-block的效果，是否可以從這里下手呢?

<div class="img-wrap"> 
 
<img src="imgs/560x200.jpg" alt=""> 
 
</div> 
 
<div class="img-wrap"> 
 
<img src="imgs/440x200.jpg" alt=""> 
 
</div> 
 
<div class="img-wrap"> 
 
<img src="imgs/300x200.jpg" alt=""> 
 
</div>  

結(jié)構(gòu)再度回歸到只有一層嵌套，然而css樣式卻需要調(diào)整一下：

.img-wrap {display: inline-block;} 

當(dāng)我，再次進(jìn)行測(cè)試的時(shí)候，心情舒暢多了，你們感受下：圖片寬度自適應(yīng)(4)。

最后，補(bǔ)上完整的css代碼：

.img-wrap { 
display: inline-block; 
 
} 
 
.img-wrap img { 
 
width: 100%; 
 
vertical-align: middle; 
 
}