图片

<picture>
概述

组合标签

用于定义不同格式的图片源,以适应不同的设备和浏览器

使用0个或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本

如果条件都不满足,就使用 <img> 指定的内容

最终所选的图像渲染在 <img> 元素占据的空间中

多用于 响应式 开发:指定不同的备选图片以 适应/匹配 不同的设备

现在的响应式是面向全站的。所以这个标签使用并不是很广泛

更多信息,请访问 MDN - <picture>

<picture>
  <source srcset="https://picsum.photos/400/300?random=0" media="(max-width:768px)">
  <img src="https://picsum.photos/800/600?random=0" alt="">
</picture>