HTML图片元素的用途

HTML<picture>元素

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

该<picture>元件包含一个或多个<source>元素，每个元素通过参照不同的图像srcset 属性。这样浏览器可以选择最适合当前视图和/或设备的图像。

每个<source>元素都有一个 media属性，用于定义图像何时最合适。

例子

针对不同的屏幕尺寸显示不同的图像：

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

何时使用图片元素

<picture>元素有两个主要用途：

1.带宽

如果您的屏幕或设备较小，则无需加载较大的图像文件。浏览器将使用 <source>具有匹配属性值的第一个元素，并忽略以下任何元素。

2.格式支持

某些浏览器或设备可能不支持所有图像格式。通过使用该<picture>元素，您可以添加所有格式的图像，浏览器将使用它识别的第一种格式，并忽略以下任何元素。

例子

浏览器将使用它识别的第一种图像格式：

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

以上就是极悦小编介绍的"HTML图片元素的用途"，希望对大家有帮助，想了解更多可查看HTML教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。