为了在不同的设备尺寸上展示不同的图片，你可以使用HTML的<picture>元素和<source>元素来实现响应式图片。以下是一个示例：
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 1200px)">
<source srcset="large.jpg">
<img src="fallback.jpg" alt="Fallback Image">
</picture>在上述示例中，<picture>元素包含了多个<source>元素和一个<img>元素作为后备图像。每个<source>元素都有一个srcset属性，它指定了在特定条件下应该使用的图片。media属性用于定义条件，当条件满足时，对应的图片将会被加载。
在这个示例中，如果设备的最大宽度为600像素，那么小尺寸的图片"small.jpg"将会加载。如果设备的最大宽度在601像素到1200像素之间，中等尺寸的图片"medium.jpg"将会加载。如果设备宽度大于1200像素，大尺寸的图片"large.jpg"将会加载。如果以上条件都不满足，那么后备图像"fallback.jpg"将会加载。
通过使用<picture>元素和<source>元素，你可以根据不同的设备尺寸展示不同的图片，以提供更好的用户体验。记得将示例中的图片路径替换为你自己的图片路径。
