W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>picture 元素</h2> <picture> <source media="(min-width: 650px)" srcset="/i/photo/amg-1.jpg"> <source media="(min-width: 465px)" srcset="/i/photo/amg-2.jpg"> <img src="/i/photo/amg-3.jpg" style="width:auto;"> </picture> <p>调整浏览器大小，可以看到不同视口尺寸下加载的不同版本图片。 浏览器会查找第一个媒体查询与用户当前视口宽度匹配的 source 元素， 并获取 srcset 属性中指定的图像。</p> <p>img 元素必须作为 picture 声明块的最后一个子标签。 img 元素用于为不支持 picture 元素的浏览器提供向后兼容性，或者在没有匹配的 source 标签时使用。</p> </body> </html>