固定寬度，像素完美的網站設計已經離我們遠去了。在寬屏顯示器，互聯網電視，多尺寸的平板電腦和智能手機的今天，我們的設計必須應付壹切可能，將寬由320px向7680px轉變。
伴隨這種多分辨率風景而至的，是需要拉伸或收縮圖像，以適應這些不同的要求。這可以被理解為如下問題，矢量圖形出現異常時，絕大多數具有特定像素的圖像寬度並不改變。
所以，我們應該怎麽做呢?
目前最常見的解決方案
作為壹般規則，妳會在任何響應式網站中發現以下CSS樣式:
1
img {
2
max-width: 100%;
3
height: auto;
4
}
此代碼使用max-width:100%的設置，以確保圖像永遠不會超越其父容器的寬度。如果父容器的寬度收縮小於圖像的寬度，圖像將隨之縮小。height:auto的設置可以確保當有這種情況發生時，圖像將以自身的寬高比保留。
這解決了壹方面的問題，使我們能夠在許多不同的情況下顯示相同的圖像。不過，這並不能讓我們對不同的情況指定不同的圖像。
#p#副標題#e#
新的解決方案：
是HTML5壹個新的元素。
如果元素與當前的和元素協同合作將大大增強響應式圖像的工作進程。它允許妳放置多個source標簽，以指定不同的圖像文件名，進而根據不同的條件進行加載。
它可以讓妳根據以下條件加載完全不同的圖像：
媒體特性結果如：視口的當前高度(viewport height)，寬度(width)，方向(orientation)。
像素密度
反過來這也意味著您可以：
加載適當大小圖像的文件，使可用帶寬得到充分利用。
加載不同裁剪並具有不同縱橫比的圖像，以適合於不同寬度的布局變化。
加載更高的像素密度，顯示更高分辨率的圖像。
的工作原理
基本工作步驟如下：
創建標簽。
在這些標簽內創建壹個妳想用來執行任何壹個特性的元素。
添加壹個media屬性，用來包含妳想要的特性，如視口的當前高度(viewport height)，寬度(width)，方向(orientation)等。
添加壹個srcset屬性與相應的圖像文件名相匹配，進行加載。如果妳想提供不同的像素密度，例如Retina顯示屏，妳可以添加額外的文件名到妳的srcset屬性中，
添加壹個回退的元素。
這裏有壹個簡單的基本的例子，用來檢查視口是否小於768px，如果小於的話就加載壹個較小的圖像：
1
picture
2
source srcset=
smaller.jpg
media=
(max-width: 768px)
3
source srcset=
default.jpg
4
img srcset=
default.jpg
alt=
My default image
5
/picture
妳可能會註意到，在media屬性使用的語法與創建CSS媒體特性中使用的語法壹樣。您可以使用相同的特性，這意味著妳可以查詢max-width，min-width，max-height，min-height，orientation等屬性。
同時，您也可以使用這些特性判斷設備的方向，從而加載橫向或縱向版本的圖像，同時您也可以進行大小特性的混合。例如：