本節書摘來自華章社群《響應式web設計：html5和css3實踐指南》一書中的第1章，第1.5節基于媒介查詢的圖像縮放，作者（美） benjamin lagrone，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視
1.5 基于媒介查詢的圖像縮放
媒介查詢是針對響應式圖像的另一個有用和高度可定制的方法。這與通過設定寬度百分比來實作自适應寬度的方法并不相同。你的設計可能需要為不同的螢幕尺寸範圍準備一些具體的圖像寬度，而自适應寬度會打破你的設計。
1.5.1 準備工作
這種方式僅僅需要一張圖像。而且在用戶端浏覽器調整圖像，而不是在伺服器端。
1.5.2 實作方式
html代碼相當簡單，使用标準的圖像标簽建立一個圖像元素，如下所示：
将css中的這個類添加到每個媒介查詢中，所對應設定的尺寸都不相同。這将會使浏覽器針對每個不同的尺寸視窗渲染所需的圖像大小。媒介查詢可與其他css類共存。接着，添加一個獨立于媒介查詢的css的類屬性，設定圖像屬性為height:auto。這樣隻需添加一行css即可對兩個媒介查詢都起作用。
通過媒介查詢方法便可實作針對多個不同的浏覽器視窗尺寸設定對應的圖像尺寸。
1.5.3 工作原理
css3媒介查詢在css中通過邏輯條件将浏覽器依據視窗屬性進行區分，并基于此來完成不同樣式的渲染。該方法正是利用這一點來對不同的浏覽器視窗尺寸設定一個不同的圖像寬度。這提供了響應式的圖像尺寸，是以你可以進行高粒度級别的控制。