搜尋

響應式圖片 <picture>

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

HTML 教學 - 響應式圖片 <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>

HTML 教學 - 響應式圖片 <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>

HTML 教學 - 響應式圖片 <picture> - 樣式

<picutre> 支援屬性

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

屬性 說明
media 指定 media query 條件,如果不符合,就執行下一個。
srcset 指定一張或多張不同尺寸大小的圖片。
type 指定圖片的檔案格式 ( 例如 image/webp 或 image/jpg ),如果不符合,就執行下一個。

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

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

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片