淺談圖片寬度自適應(yīng)解決方案

作者：百碼山莊 2017-04-13 11:20:37

在網(wǎng)頁設(shè)計中，隨著響應(yīng)式設(shè)計的到來，各種響應(yīng)式設(shè)計方案層出不窮。對于圖片響應(yīng)式的問題也有很多前端開發(fā)人員在進行研究。比較好的圖片響應(yīng)式設(shè)想便是在不同的屏幕分辨率下使用不同實際尺寸的圖片，而達到在高速網(wǎng)絡(luò)環(huán)境中使用大或超大高清圖片，在低速網(wǎng)絡(luò)或需要替用戶節(jié)省流量資源的環(huán)境中使用小而清晰的圖片，保證用戶無論在何種環(huán)境下都能有良好的瀏覽體驗。

[[188442]]

問題描述

我們先來看下我想要描述的問題。首先我準備了三張寬度不同的圖片，讓他們垂直排列在頁面中，除了去除圖片本身在垂直方向上產(chǎn)生的間距，不做其他任何樣式處理，這種情況我們通常在博文中經(jīng)常看到，在寫博文的時候經(jīng)常用到，具體效果請看：圖片寬度自適應(yīng)(1)(http://sandbox.runjs.cn/show/wxqdsnmx)。簡單看下我們的頁面結(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)整瀏覽器寬度來測試。測試效果如下gif圖所示：

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

簡單嘗試

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

和示例一一樣，我們還是手動改變可視區(qū)域?qū)挾葋碛^看圖片的表現(xiàn)：

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

兵來將擋，水來土掩

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

我們知道，在CSS中，寬度的百分比是是相對于父級容器寬度的。如果我們能有辦法控制圖片標簽的父容器的寬度，那問題是不是就解決了呢?

首先，為了讓圖片標簽有可控的父元素，我們先對代碼結(jié)構(gòu)做一點點調(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>

好了，接下來就是如何控制img-wrap元素的寬度的問題了。我首先想到的是浮動(float)，因為我們知道浮動元素的寬度是隨內(nèi)容變化的，所以我先給img-wrap設(shè)置了如下樣式：

.img-wrap {float: left;}

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

<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)在我們在來看看，被折騰成什么樣子了，圖片寬度自適應(yīng)(3)(http://sandbox.runjs.cn/show/eknk80m9)

哈哈，好像是我想要的效果了。但是，作為一個有點強迫癥的開發(fā)者，雖然達到了我想要的效果，但加了那么多層嵌套標簽，總讓我感覺不舒服。于是，我繼續(xù)折騰，終于我恍然大悟， display:inline-block 的元素寬度也是隨內(nèi)容變化的，而且圖片默認樣式恰巧也表現(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)我，再次進行測試的時候，心情舒暢多了，你們感受下：圖片寬度自適應(yīng)(4)。

最后，補上完整的css代碼：

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

責(zé)任編輯：龐桂玉來源：前端大全

圖片寬度解決方案前端