響應式影像技術與資源分享

紫鳳發表於2012-11-27

本文作者：

Jake Rocheleau是一名狂熱的Web設計師及社交媒體企業家。他經常研究數字化設計和新時代網際網路思想的最新趨勢。

摘要：

在響應式的網站設計中，很重要的一個部分就是圖片的響應式設計。在這篇文章中Rocheleau分享了移動Web在處理圖片時需要用的一些技術，使用它們能夠幫助你快速的生成支援響應式設計的圖片。

正文

近年來，隨著智慧裝置的普及，響應式Web設計可謂風頭正茂，Web開發者的追捧，各種資源的報導，相信您對其並不陌生。響應式的影像是使用HTML的IMG標籤傳送的圖片，可以根據不同的螢幕大小而改變圖片來源。在響應式的網站設計中，很重要的一個部分就是圖片的響應式設計，在這篇文章中我們將探討移動Web在處理圖片時需要用到哪些技術，使用它們能夠幫助你快速的生成支援響應式設計的圖片。

影像的位置和樣式

enter image description here

利用CSS3屬性來建立影像或許是個不錯的想法，它能幫助你在富媒體頁面上脫穎而出，你可以根據頁面的佈局來隨意調整大小。

當使用者調整瀏覽器視窗時，你應該思考如何將圖片進行堆疊。HTML元素的位置將決定佈局位置是否能夠自由縮放。

支援Retina（視網膜）影像

enter image description here

響應式媒體另一方面也適用於移動retina裝置。有些常用的影像會在裝置上出現更加密集的畫素。那麼我們該如何解決呢？最好的辦法就是將圖片設定為較大的尺寸，最好設定成正常大小的兩倍。因此，如果你的logo是200×150 ，那麼你應該建立的影像為400×300。依此類推。如果你的讀者使用的是retina螢幕，那他就不會錯過任何一個先進的樣式。

就我個人而言，我比較喜歡JavaScript庫，這裡推薦使用retina.js的@2x影像。這裡需要注意的是，當頁面載入Retina.js時，檢查當前的裝置是否支援畫素密度大於1x，是否所有的 src屬性被替換為典型的Apple-style @2x（比如，pear.png變成pear@2x.png）。

自然更改CSS影像大小

enter image description here

在預設的情況下，如果你的影像沒有按照設固定的寬度或高度進行設定，這時圖片會摺疊頁面內容。但是響應式圖片並不能有效的使用自定義的寬度/高度。這裡有個不錯的方法可以幫助你解決此問題。

將下面的程式碼max-width新增到樣式列表中

img { display: block; border: 0; max-width: 100%; } 問題是當我們給寬度新增自定義的寬度/高度屬性時，其高度依然保持不變。因此，影像可以拉伸和縮放但不能垂直下拉。你可以在CSS中新增height: auto;請注意，這個方法不適用於JavaScript或是外部第三方資源。我已經在大部分響應式Web專案中試用過，在Firefox，Chrome、Internet Explorer中沒有發現任何Bug。

開源替代方案

enter image description here