本節(jié)書摘來自華章社區(qū)《響應(yīng)式Web設(shè)計：HTML5和CSS3實踐指南》一書中的第1章，第1.2節(jié)基于寬度百分比的圖像縮放，作者（美）　Benjamin LaGrone，由青島網(wǎng)站建設(shè)整理。

1.2　基于寬度百分比的圖像縮放

本方法依賴于客戶端編碼來完成對于大圖像的縮放功能?？蛻舳酥恍鑶螐垐D像來依據(jù)瀏覽器的窗口大小呈現(xiàn)圖像。如果對于客戶端的網(wǎng)絡(luò)帶寬有足夠的信心，確信該操作不會使得頁面加載變慢，那么本方法是比較可行的。

1.2.1　準(zhǔn)備工作

毫無疑問我們需要一張圖像。使用Google的圖像搜索來獲取一張高分辨率的圖像。例如，搜索 robots，將會得到158 000 000條記錄，還不錯的結(jié)果。但是想要的是一張大尺寸的圖像，因此單擊Search tools選項，然后將Any Size選項改為Large?？梢钥吹揭廊挥? 960 000張圖片可供選擇。

該圖像應(yīng)該能夠縮放以適配最大尺寸的可視區(qū)域。打開圖像編輯軟件。如果并未安裝此類軟件，也會有眾多的免費圖像編輯軟件供你選擇。Gimp便是其中之一，它是一款功能強大的開源圖片編輯軟件，因此下載是完全免費的。訪問http://www.gimp.org即可獲取。

1.2.2　實現(xiàn)方式

通過圖像編輯工具打開想要編輯的圖像并且將其寬度設(shè)置為300px。保存編輯后的新圖像，然后移動或者上傳到你的Web應(yīng)用所對應(yīng)的資源文件夾中。

為了展示響應(yīng)式特效，需要在HTML中嵌入圖像和一些文字說明。如果沒有足夠的時間來闡述你的人生經(jīng)歷，沒有關(guān)系，回到互聯(lián)網(wǎng)并通過Ipsum生成器來得到一些文本樣本。訪問http://www.lipsum.com即可獲取Ipsum文本段落。

在CSS文件中需要為文本段落、圖像及圖像包裝器（wrapper）分別設(shè)置相應(yīng)的類屬性。文本段落設(shè)置為向左浮動，同時寬度為60%，圖像包裝器（wrapper）的寬度則為40%。

現(xiàn)在的布局方式為流式布局（fluid layout），但是響應(yīng)式的圖像效果依然不見蹤影。目前的圖像仍然是靜態(tài)的，寬度依舊為300px。但是當(dāng)添加了下面的CSS配置后，一切都會改變。為圖像添加一個新的類，設(shè)置max-width屬性值為100%。這會使得圖像的寬度適應(yīng)瀏覽器寬度的改變。接下來，將height屬性設(shè)置為可動態(tài)變化的值。

到目前為止，經(jīng)過優(yōu)化并可以適應(yīng)瀏覽器窗口大小改變的圖片就已經(jīng)呈現(xiàn)在讀者眼前了。

下載示例代碼

登錄http://www.packtpub.com可以下載通過你的賬戶所購買的所有Packt書籍的示例源碼。如果是通過其他途徑購買的本書，訪問http://www.packtpub.com/support，完成注冊即可通過電子郵件獲取源碼。

1.2.3　工作原理

設(shè)置在CSS中圖像元素的responsive屬性會強制該元素100%占據(jù)其父元素的空間。當(dāng)父元素的寬度改變時，圖像元素也會相應(yīng)改變并填充對應(yīng)的寬度。而屬性height: auto的作用在于保證圖像自身的高寬比例不會發(fā)生變化。