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教程：


在線技術維基！