W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>根据浏览器宽度显示不同的图像</h1> <p>调整浏览器宽度，图像将在 600px 和 1500px 处切换。</p> <picture> <source srcset="/i/photo/amg-3.jpg" media="(max-width: 600px)"> <source srcset="/i/photo/amg-2.jpg" media="(max-width: 1500px)"> <source srcset="/i/photo/amg-1.jpg"> <img src="/i/photo/amg-3.jpg" alt="AMG" style="width:auto;"> </picture> </body> </html>