HTML`picture`標籤

探索使用圖像和HTML的基礎知識picture標籤,以及如何使它們響應

HTML給了我們picture標籤,它的功能非常相似srcset一個的屬性img標籤,差異非常細微。

你用picture當您完全不希望更改文件,而不僅僅是提供較小版本的文件時。或提供其他圖像格式。

我發現的最佳用例是在提供WebP圖像時,這種格式仍未得到廣泛支持。在裡面picture標籤指定圖像列表,這些圖像將按順序使用,因此在下一個示例中,支持WebP的瀏覽器將使用第一個圖像,如果不使用,則回退為JPG:

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

source標籤為圖像定義一種(或多種)格式。這img如果瀏覽器非常舊並且不支持picture標籤。

在裡面source裡面的標籤picture您可以添加一個media屬性以設置媒體查詢。

類似於上述示例的工作方式如下所示的示例srcset

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

但這不是用例,因為如您所見,它更加冗長。

picture標籤是最近的,但現在是支持的除Opera Mini和IE(所有版本)以外的所有主要瀏覽器都可以使用。

免費下載我的HTML手冊


更多HTML教程: