picture html5(代码示例)

picture元素是HTML5中用于在网页中展示不同分辨率或不同设备上适应的图片的标签。它可以让开发者根据不同的条件选择合适的图片进行展示，从而提高网页加载速度和用户体验。

下面是一个picture元素的示例代码：

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="small.jpg" alt="A picture">
</picture>

在上面的示例代码中，我们使用了picture元素来展示一张图片。我们使用了两个source元素，它们分别使用了不同的媒体查询条件和srcset属性来指定不同的图片资源。第一个source元素中的media属性指定了一个最小宽度为1200像素的媒体查询条件，srcset属性指定了一个大尺寸的图片资源large.jpg。第二个source元素中的media属性指定了一个最小宽度为600像素的媒体查询条件，srcset属性指定了一个中等尺寸的图片资源medium.jpg。

如果浏览器满足第一个source元素中的媒体查询条件，它将会加载并展示large.jpg这个大尺寸的图片。如果浏览器不满足第一个source元素中的媒体查询条件但满足第二个source元素中的媒体查询条件，它将会加载并展示medium.jpg这个中等尺寸的图片。如果浏览器不满足任何一个source元素中的媒体查询条件，它将会加载并展示img元素中的小尺寸图片small.jpg。

通过使用picture元素和source元素，我们可以根据不同的条件选择合适的图片资源，从而在不同设备上提供更好的图片展示效果。这样可以减少不必要的图片加载，提高网页加载速度，并且在不同设备上提供更好的用户体验。