HTML<picture>元素

HTML<picture>元素為Web開發人員指定圖像資源提供了更大的靈活性。

該<picture>元件包含一個或多個<source>元素，每個元素通過參照不同的圖像srcset 屬性。這樣瀏覽器可以選擇最適合當前視圖和/或設備的圖像。

每個<source>元素都有一個 media屬性，用于定義圖像何時最合適。

例子

針對不同的屏幕尺寸顯示不同的圖像：

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

何時使用圖片元素

<picture>元素有兩個主要用途：

1.帶寬

如果您的屏幕或設備較小，則無需加載較大的圖像文件。瀏覽器將使用 <source>具有匹配屬性值的第一個元素，并忽略以下任何元素。

2.格式支持

某些瀏覽器或設備可能不支持所有圖像格式。通過使用該<picture>元素，您可以添加所有格式的圖像，瀏覽器將使用它識別的第一種格式，并忽略以下任何元素。

例子

瀏覽器將使用它識別的第一種圖像格式：

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

以上就是動力節點小編介紹的"HTML圖片元素的用途"，希望對大家有幫助，想了解更多可查看HTML教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。