html picture标签,html picture source
HTML标签<picture>是用于在网页上显示响应式图片的容器元素。它允许开发人员根据浏览器窗口大小或设备像素密度等条件动态选择不同的图像。

<picture>元素包含一个或多个<source>子标签以及一个<img>标签。每个<source>标签都定义了一种可能的图片源，可以通过指定不同的媒体查询条件和图像资源来进行配置，而<img>标签则作为备用方案，用于在所有<source>标签中的媒体查询条件都不匹配时加载。

以下是使用<picture>元素的例子：

html
<picture>
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="An example image">
</picture>


这个例子中，<picture>元素包含两个<source>标签和一个<img>标签。第一个<source>标签指定了一个大图像，在窗口宽度大于或等于1200像素时将被加载；第二个<source>标签指定了一个中等大小的图像，在窗口宽度大于或等于768像素时将被加载。最后，<img>标签指定了一个小图像，在没有其他合适的条件时将被加载。