更新時間:2021-08-26 12:58:58 來源:動力節(jié)點 瀏覽1250次
HTML<picture>元素為Web開發(fā)人員指定圖像資源提供了更大的靈活性。
該<picture>元件包含一個或多個<source>元素,每個元素通過參照不同的圖像srcset 屬性。這樣瀏覽器可以選擇最適合當(dāng)前視圖和/或設(shè)備的圖像。
每個<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.帶寬
如果您的屏幕或設(shè)備較小,則無需加載較大的圖像文件。瀏覽器將使用 <source>具有匹配屬性值的第一個元素,并忽略以下任何元素。
2.格式支持
某些瀏覽器或設(shè)備可能不支持所有圖像格式。通過使用該<picture>元素,您可以添加所有格式的圖像,瀏覽器將使用它識別的第一種格式,并忽略以下任何元素。
例子
瀏覽器將使用它識別的第一種圖像格式:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
以上就是動力節(jié)點小編介紹的"HTML圖片元素的用途",希望對大家有幫助,想了解更多可查看HTML教程。動力節(jié)點在線學(xué)習(xí)教程,針對沒有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識,讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程,感興趣的同學(xué)可以關(guān)注一下。