<picture> 響應式圖片元素可以在 HTML 裡放入適合不同解析度的圖片，當符合特定解析度時，就會顯示對應的圖片 ( 俗稱的響應式設計 )，這篇教學會介紹 <picture> 響應式圖片元素以及相關用法。

原文參考：響應式圖片 picture

認識 <audio>

<picture> 響應式圖片元素可以在 HTML 裡使用 <source> 放入適合不同解析度的圖片，當符合特定解析度時，就會顯示對應的圖片 ( 俗稱的響應式設計 )。

• <picture> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」。
• <picture> 顯示類型為「inline-block 行內元素裡包覆塊級元素」，預設不會強制換行，寬度超過父元素寬度才會換行。
• <source> 只能是 <video> 或 <audio> 的子元素。

使用 <picture> 需要同時使用 <source> 和 <img> 元素，<source> 具有 srcset 和 media 屬性，符合指定螢幕的解析度時 ( media )，就會顯示對應的圖片 ( srcset )，如果不符合條件，則會顯示 <img> 的圖片，基本用法如下：

<picture>
  <!-- 最小寬度 400px 時顯示 photo-400.jpg -->
  <source srcset="photo-400.jpg" media="(min-width:400px)">
  <!-- 最小寬度 300px 時顯示 photo-300.jpg -->
  <source srcset="photo-300.jpg" media="(min-width:300px)">
  <!-- 最小寬度小於 300px 時顯示 photo.jpg -->
  <img src="photo.jpg">
</picture>

例如下方的 HTML 開啟後，會使用 <picture> 在網頁中放入三張適合不同解析度的圖片，當畫面寬度不同時，就會顯示不同圖片 ( 圖片來源：Google Doodles )。

<picture>
  <source srcset="https://www.google.com/logos/doodles/2022/st-andrews-day-2022-6753651837109549-2x.png" media="(min-width:400px)">
  <source srcset="https://www.google.com/logos/2022/lawson/r1130/lawson_cta.png" media="(min-width:300px)">
  <img src="https://www.google.com/logos/doodles/2022/thanksgiving-2022-6753651837109542.5-2x.png" width="200">
</picture>

<picture> 樣式

使用 <picture> 之後，等同於將對應的網址放入 <img> 的 src 屬性中，因此只要設定 <img> 的樣式，就是設定該張圖片的樣式，例如下方的 HTML 執行後，不論圖片如何變化，都會加上寬度 5px 的黑色邊框。

<picture>
  <source srcset="https://www.google.com/logos/doodles/2022/st-andrews-day-2022-6753651837109549-2x.png" media="(min-width:400px)">
  <source srcset="https://www.google.com/logos/2022/lawson/r1130/lawson_cta.png" media="(min-width:300px)">
  <img src="https://www.google.com/logos/doodles/2022/thanksgiving-2022-6753651837109542.5-2x.png"
   style="border:5px solid #000; width:200px;">
</picture>

<picutre> 支援屬性

<picutre> 本身沒有屬性設定，但需要設定 <source> 的屬性，可以設定的屬性如下：

以下方的 HTML 為例，網頁開啟後會預先讀取 webp 檔案，如果不支援或檔案不存在，則使用 jpg 檔案。

<picture>
  <source srcset="photo.webp" type="image/webp>
  <img src="photo.jpg">
</picture>

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• Leonardo.Ai 教學
• HTML 教學