HTML - <picture> 標籤

HTML <picture> 標籤定義了不同尺寸或解析度的影像。它是<img> 標籤的替代標籤，包含<source> 和 <img> 元素。當您想根據裝置顯示不同的影像時，<picture> 標籤非常有用。

<picture> 元素包含一個或多個<source> 元素和一個<img> 元素，後者作為塊的最後一個子元素。<source> 元素包含針對各種顯示裝置場景的影像版本。<img> 元素描述了影像的尺寸和其他屬性。瀏覽器獲取每個子 <source> 元素並載入最合適的影像。如果找不到匹配項，瀏覽器將顯示 <img> 標籤提供的影像。

<picture> 標籤的用途

<picture> 元素允許指定多個影像以更準確地填充瀏覽器視口，而不是隻有一個根據視口寬度縮放的影像。它可以用於以下目的：

調整和裁剪適用於各種媒體情況的圖片
在不支援某種格式時提供替代影像格式。

如何使用<picture> 標籤？

您可以透過根據不同的媒體規則定義不同的影像來使用<picture> 標籤。您需要使用多個<source> 元素和一個<img> 元素。

語法

以下是使用 picture 標籤的語法

<picture>
   <source media="..." srcset="..">
   <source media="..." srcset="..">
   <img src="..." alt="..">
</picture>

與<picture> 標籤一起使用的屬性

HTML <picture> 標籤還支援以下附加屬性：

序號	屬性與描述
1	media 接受任何有效的媒體查詢，這些查詢通常在 CSS 中定義。
2	sizes 定義單個寬度描述符、頻寬度描述符的單個媒體查詢或頻寬度描述符的媒體查詢的逗號分隔列表。
3	src 指定影像的 URL。
4	srcset (必需) 指定在不同情況下使用的影像的 URL。
5	type 定義 MIME 型別。

示例 1：基本用法

以下示例演示如何使用 media 屬性根據螢幕寬度指定不同的影像

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
   <picture>
      <source media="(min-width: 600px)" srcset="/artificial_intelligence/images/artificial-intelligence-mini-logo.jpg">
      <source media="(min-width: 450px)" srcset="/cg/images/logo.png">
      <img src="/html/images/html-mini-logo.jpg" alt="LOGO" style="width:auto;">
   </picture>
</body>
</html>

示例 2：視網膜顯示器的響應式影像

以下示例演示如何根據視網膜顯示器設定不同的影像。執行程式碼後，在視網膜顯示器上將載入“html-mini-logo.jpg”，在普通顯示器上將載入“logo.png”。

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source srcset="/html/images/html-mini-logo.jpg 2x, /cg/images/logo.png 1x">
  <img src="/html/images/html_images.jpg" alt="High-resolution image">
</picture>
</body>
</html>

示例 3：使用不同的影像格式

此示例演示如何指定不同的格式。執行此示例後，如果瀏覽器支援 WebP，則將載入1.webp，這是一個更最佳化的格式。否則，將載入html_images.jpg。

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/1.webp"/>
  <source type="image/jpeg" srcset="/html/images/html_images.jpg"/>
  <img src="/html/images/html-mini-logo.jpg" alt="Different formats images"/>
</picture>
</body>
</html>

html_tags_reference.htm

列印頁面