Ethan Marcotte曾經在A List Apart上發表過一篇名為“Responsive Web Design”的文章，他當時就提出了響應式架構的概念（不少混跡技術圈的肯定看過這篇文章，這里就不再贅述了）。隨着終端設備的日益豐富，無法針對設備類型、尺寸或瀏覽器進行自適應調整的圖像會嚴重減慢網站的訪問速度，最終導致用戶流失。
一，談到圖片自適應，很多前端開發人員會不假思索的來一句“寬度100%”
例如：
1 <html> 2 <head> 3 <style> 4 html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;} 5 .imgBox, .imgBox img{width:100%;height:100%;} 6 </style> 7 </head> 8 <body> 9 <div class="imgBox"> 10 <img src="1.jpg" /> 11 </div> 12 </body> 13 </html>
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
.imgBox, .imgBox img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="imgBox">
<img src="1.jpg" />
</div>
</body>
</html>
精髓可以是這樣一行CSS代碼：
1 img{ width:100%;height:auto;max-width:100%;display:block;}
img{ width:100%;height:auto;max-width:100%;display:block;}
如果背景圖片，就用background-size，例如：
為canvas標簽增加自定義背景：
1 #myCanvas { 2 background-image: url(${webRoot }/webpage/weixin/images/agency.jpg); 3 background-size: 100%; 4 }
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
background-size: 100%;
}
注：url中是圖片的路徑，大家需自行修改。
沒錯，就是這么一行簡短的代碼！部分前端開發者認為這行代碼既簡潔又高效，很好地解決了圖片自適應問題，但有部分前端開發者認為這種方法無法解決分辨率問題，無法保證圖片不失真，這個問題到底應該如何解決呢？
一個圖像版本顯然是不夠的，為了確保各個屏幕尺寸之間的平滑過渡，設計師必須以不變應萬變。也就是說，必須采取靜態的方式使圖像適應性更強。對於靈活的布局大小和屏幕密度的多樣性都有相同的解決方案：提供可變分辨率的圖像。圖片分為背景圖片和通過img標簽引入的圖片，我們是應該使用高分辨率圖像來利用高分辨率硬件，還是使用小圖像以便在低分辨環境中快速加載？
通過提供同一圖像的不同版本（大小和分辨率），可以向需要的網站訪問者發送高分辨率版本，為不具有此功能的網站提供較低分辨率的版本。要了解需要多少不同版本，可以采取以下步驟：
建立尺寸和分辨率范圍的極限，並記錄各種尺寸和分辨率。
使用新的響應式圖像標記來標記備用版本，以便瀏覽器可以加載最適合用戶屏幕分辨率和窗口大小的版本。
具體到代碼級，前端開發應該怎么做呢？
面對格式問題，我們可以盡量讓瀏覽器替我們決定。過去，實際上只有四種圖像格式具備通用接受性：GIF，JPEG，PNG或SVG。然而，今天的響應式，太多可變格式的圖像允許開發者使用新的技術，以便可以在支持的瀏覽器中使用其他更新更好的格式，在不支持的瀏覽器中繼續使用舊格式。
<img src="800px.png" srcset="400px.png 400w, 800px.png 800w, 1600px.png 1600w, 2400px.png 2400w, 3200px.png 3200w" sizes="80vw">
<img src="800px.png" srcset="400px.png 400w, 800px.png 800w, 1600px.png 1600w, 2400px.png 2400w, 3200px.png 3200w" sizes="80vw">
綜述
網站加載時間延遲一秒就可能會導致網站轉化率下降7％，創建響應式Web環境是棘手的，它需要微妙的平衡。但是，在不同屏幕尺寸和設備功能的世界中，建立這種圖片自適應是必要的。總結下來基本是兩種方法：如果不在乎分辨率，開發者可以沿用寬度100%的方法，這種方法是最簡便的；如果需要考慮分辨率，就需要查詢清楚不同設備的分辨率，然后采用第三方服務或在代碼層自主進行設置。