HTML<picture>元素

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

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

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

例子

針對(duì)不同的屏幕尺寸顯示不同的圖像：

<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>

何時(shí)使用圖片元素

<picture>元素有兩個(gè)主要用途：

1.帶寬

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

2.格式支持

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

例子

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

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

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