HTML <picture> 标签

• 

  <picture>标签定义和用法

  <picture>标签为Web开发人员提供了指定图像资源的更大灵活性。

  <picture>元素的最常见用途是用于响应式设计中的艺术指导。可以设计多个图像以更好地填充浏览器视口，而不是根据视口宽度放大或缩小一个图像。

  <picture>元素包含两个不同的标记：一个或多个 <source>标记和一个<img>标记。

  <source>元素具有以下属性：

  • srcset（必需） - 定义要显示的图像的URL
  • media - 接受通常在CSS中定义的任何有效媒体查询
  • sizes - 定义单个宽度描述符，带宽度描述符的单个媒体查询，或带宽度描述符的逗号分隔的媒体查询列表
  • type - 定义MIME类型

  浏览器将使用属性值加载最合适的图像。浏览器将使用带有匹配提示的第一个 <source>元素，并忽略以下任何 <source>标记。 <img>元素是<picture>声明块的最后一个子标记。<img>元素用于为不支持<picture>元素的浏览器提供向后兼容性，或者如果没有匹配的 <source>标记。

  <picture>元素的工作方式类似于<video>和<audio>元素。您设置了不同的源，第一个符合首选项的源是正在使用的源。
• 

  <picture>标签浏览器支持

  IE/Edge	Chrome	FireFox	Safari	Opera
  13.0（含）以上	38.0（含）以上	38.0（含）以上	9.1（含）以上	25.0（含）以上

• 

  HTML4.01和HTML5之间的差异

  <picture>标记是HTML5中的新标记。
• 

  <picture>标签实例

  <picture>
   <source media="(min-width: 650px)" srcset="/images/fj3.jpg">
   <source media="(min-width: 465px)" srcset="/images/fj2.jpg">
   <img src="/images/fj1.jpg" alt="fj" style="width:auto;">
  </picture>

  尝试一下
• 

  <picture>标签全局属性

  <picture>标签还支持全局属性。 查看有关全局属性的更多知识。
• 

  <picture>标签事件属性

  <picture>标签还支持事件属性。 查看有关事件属性的更多知识。
• 

  <picture>标签相关页面

  HTML教程：HTML响应式
• 

  <picture>标签默认CSS设置

  没有。