響應式設計核心技術之彈性圖片

+ 查看更多

響應式網站設計中，如何處理圖片是一個非常重要的方面。在設計歷史上，很多同比縮放圖片的技術，但很少有簡單可行的。所謂液態圖片或彈性圖片，是人們對這種需求的一個高度概括的命名方式。簡單地講，就是圖片在根據屏幕大小伸縮的時候，圖片的比例保持不變。目前，起飛頁采用的技術一種比較流行的技術，即使用CSS的max-width屬性。這個方法，最早由Richard R.最先嘗試，Ethan M. 的液態圖片一文中也有提及的。我們只需要簡單的一行代碼，就可以實現這個特性。這個魔法代碼就是：

 

img { max-width: 100%;}

 

如果沒有其他的樣式屬性覆蓋掉這個樣式，那么在我們打開一個網頁的時候，頁面上所有的圖片，都會按照預設的寬度進行加載。如果屏幕的大小小于這個預設的寬度，那么圖片的寬度就會小于預測的寬度。當然這個寬度，也是圖片所在容器的寬度，如果容器的寬度變小，那么圖片的寬度也會跟隨變小。這個辦法的好處在于，和已經存在的代碼沖突的可能性非常小，非常容易部署和實現，也非常安全。下圖展示了在不同大小的瀏覽器中同一個圖片的顯示方式：

 

 

 

彈性圖片這個技術，雖然簡單好用，但也有限制。我們只能將其應用于有IMG標簽的圖片，并不能應用于背景圖片。原因是背景圖片并不能改變容器的高度，所以也不能和容器一起變化。你也可以理解為，在不同的分辨率下，容器的比例發生了變化，背景圖片沒有辦法，跟隨容器一起變化。我們會在其他的文章中，再詳細討論這個問題。

 

起飛頁系統中的圖片組件，已經使用了這個技術。也就是說在起飛頁的圖片組件中，圖片會根據設備進行縮放。其實，除了彈性圖片，起飛頁還會根據不同的設備，自動對圖片進行壓縮，如果使用手機訪問的話，您所查看的圖片的寬度不會超過320像素，這會大大提高3G網絡訪問網站時的速度。當然，如果您不在乎客戶使用手機打開網站的速度，也可以關閉掉這個功能。