国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > picture 以获得更好的体验。

# HTML 的 <picture> 标签

请查看 HTML 元素帮助手册 了解更多 HTML 元素。

HTML 的 <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

# 属性

请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。

# 示例

<picture>
  <!-- 针对大屏幕（宽度≥1200px）提供高清图像 -->
  <source 
    media="(min-width: 1200px)" 
    srcset="large-image.jpg, large-image-2x.jpg 2x"
    type="image/jpeg">
  
  <!-- 中等屏幕（宽度≥768px）提供中等分辨率图像 -->
  <source 
    media="(min-width: 768px)" 
    srcset="medium-image.webp, medium-image-2x.webp 2x"
    type="image/webp">
  
  <!-- 小屏幕设备提供优化后的图像（WebP格式优先） -->
  <source 
    srcset="small-image.webp"
    type="image/webp">
  
  <!-- 默认回退图像（当浏览器不支持<picture>或所有source不匹配时使用） -->
  <img 
    src="fallback-image.jpg" 
    alt="描述图像内容的文字"
    width="800"
    height="450"
    loading="lazy">
</picture>

# 推荐阅读

本文 更新于: 2025-11-27 09:38:04 创建于: 2025-11-27 09:38:04