如何让<picture>元素在移动设备上显示正确的图片？

要让<picture>元素在移动设备上显示正确的图片，可以采取以下步骤：

1. 使用响应式图片：在移动设备上，由于屏幕尺寸和分辨率的不同，需要提供不同尺寸和分辨率的图片。可以使用srcset属性来指定不同的图片源，浏览器会根据设备的特性选择最合适的图片进行显示。
2. 使用<source>元素：<picture>元素可以包含多个<source>元素，每个<source>元素可以指定不同的媒体查询条件和图片源。通过使用媒体查询条件，可以根据设备的特性选择最合适的图片。
3. 提供备用图片：在<picture>元素的最后可以使用<img>元素作为备用图片，以防浏览器不支持<picture>元素或无法选择合适的图片源。<img>元素的src属性可以指定默认的图片源。

下面是一个示例代码：

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Fallback Image">
</picture>

在上面的示例中，如果设备的最小宽度大于等于768px，则显示large.jpg；如果设备的最小宽度大于等于480px，则显示medium.jpg；否则显示small.jpg作为备用图片。

推荐的腾讯云相关产品：腾讯云对象存储（COS）

• 产品介绍链接地址：https://cloud.tencent.com/product/cos