使用 <picture> 來設定 RWD 圖片

好用的標籤。

方便之處

在製作 RWD 的時可能會針對不同寬度的裝置來提供不同尺寸的圖片。除了用 media query 或 JavaScript 之外，還可以利用 <picture> 來實現：

<picture>
  <!-- 768px 以上要顯示的圖片 -->
  <source
    srcset="images/desktop/image-transform.jpg"
    media="(min-width: 760px)"
  />
  <!-- 不支援 picture 標籤，或不符合上面的條件時套用 -->
  <img src="images/mobile/image-transform.jpg" />
</picture>

瀏覽器會先從 <source> 找出匹配圖片，如果沒有（或瀏覽器不支援 <picture>）就會使用 <img> 裡的圖片。

備註：

• <source> 可以有多個
• <img> 一定要寫在最後面，因為出現在 <img> 後的 <source> 都會被省略