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