響應式影像 <picture>

常用在響應式設計中，不必再以一張影像來通吃所有媒體裝置。在 <picture> 內還有兩個子元素，分別為 <source>、<img>。

瀏覽器會依據媒體查詢（Media Query）與目前視窗寬度相符的第一個子元素 <source>，顯示適當的影像；若無相符者，會再查找下一個的子元素 <source> 進行匹配。

<img> 為最後一個子元素是必備的，當所有 <source> 都不匹配時，就會以 <img> 為主。

<picture>
  <source media="(min-width: 1025px)" srcset="./images/css-l.png">
  <source media="(min-width: 769px)" srcset="./images/css-m.png">
  <img src="./images/css-s.png" alt="CSS">
</picture>

media

用來設定媒體查詢的條件。若不相符，便會往下一個進行匹配。

srcset

指定匹配的影像來源。