上面兩節分別解決了圖元密度和螢幕大小的適配，但是如果要同時適配不同圖元密度、不同大小的螢幕，應該怎麼辦呢？
這時，就要用到<picture>標籤。它是一個容器標籤，內部使用<source>和<img>，指定不同情況下載入的圖像。
<picture>
<source media="(max-width: 500px)" srcset="cat-vertical.jpg">
<source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
<img src="cat.jpg" alt="cat">
</picture>
上面代碼中，<picture>標籤內部有兩個<source>標籤和一個<img>標籤。
<source>標籤的media屬性給出媒體查詢運算式，srcset屬性就是<img>標籤的srcset屬性，給出載入的影像檔。sizes屬性其實這裡也可以用，但由於有了media屬性，就沒有必要了。
流覽器按照<source>標籤出現的順序，依次判斷當前設備是否滿足media屬性的媒體查詢運算式，如果滿足就載入srcset屬性指定的圖片檔，並且不再執行後面的<source>標籤和<img>標籤。
<img>標籤是預設情況下載入的圖像，用來滿足上面所有<source>都不匹配的情況。
上面例子中，設備寬度如果不超過500px，就載入豎屏的圖像，否則載入橫屏的圖像。
下面給出一個例子，同時考慮螢幕尺寸和圖元密度的適配。
<picture>
<source srcset="homepage-person@desktop.png,
homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png,
homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png,
homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
上面代碼中，<source>標籤的media屬性給出螢幕尺寸的適配條件，每個條件都用srcset屬性，再給出兩種圖元密度的圖像 URL。
