《響應式Web設計：HTML5和CSS3實踐指南》——1.2節基于寬度百分比的圖像縮放

本節書摘來自華章社群《響應式web設計：html5和css3實踐指南》一書中的第1章，第1.2節基于寬度百分比的圖像縮放，作者（美）　benjamin lagrone，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視

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

本方法依賴于用戶端編碼來完成對于大圖像的縮放功能。用戶端隻需單張圖像來依據浏覽器的視窗大小呈現圖像。如果對于用戶端的網絡帶寬有足夠的信心，确信該操作不會使得頁面加載變慢，那麼本方法是比較可行的。

1.2.1　準備工作

毫無疑問我們需要一張圖像。使用google的圖像搜尋來擷取一張高分辨率的圖像。例如，搜尋 robots，将會得到158 000 000條記錄，還不錯的結果。但是想要的是一張大尺寸的圖像，是以單擊search tools選項，然後将any size選項改為large。可以看到依然有4 960 000張圖檔可供選擇。

1.2.2　實作方式

通過圖像編輯工具打開想要編輯的圖像并且将其寬度設定為300px。儲存編輯後的新圖像，然後移動或者上傳到你的web應用所對應的資源檔案夾中。

在css檔案中需要為文本段落、圖像及圖像包裝器（wrapper）分别設定相應的類屬性。文本段落設定為向左浮動，同時寬度為60%，圖像包裝器（wrapper）的寬度則為40%。

現在的布局方式為流式布局（fluid layout），但是響應式的圖像效果依然不見蹤影。目前的圖像仍然是靜态的，寬度依舊為300px。但是當添加了下面的css配置後，一切都會改變。為圖像添加一個新的類，設定max-width屬性值為100%。這會使得圖像的寬度适應浏覽器寬度的改變。接下來，将height屬性設定為可動态變化的值。

到目前為止，經過優化并可以适應浏覽器視窗大小改變的圖檔就已經呈現在讀者眼前了。

下載下傳示例代碼

1.2.3　工作原理

設定在css中圖像元素的responsive屬性會強制該元素100%占據其父元素的空間。當父元素的寬度改變時，圖像元素也會相應改變并填充對應的寬度。而屬性height: auto的作用在于保證圖像自身的高寬比例不會發生變化。