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


在线技术百科！