HTML ＜picture＞元素

最新推荐文章于 2025-04-29 11:20:35 发布

不积跬步,无以至千里.

最新推荐文章于 2025-04-29 11:20:35 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.csdn.net/Mweb_demo/article/details/110004373

HTML 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用HTML的picture元素和sources标签来实现根据屏幕尺寸动态加载不同大小的图片，确保在不同设备上都能得到最佳的显示效果。当浏览器不支持picture属性时，会回退到使用img元素加载默认图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：
<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>