主页
HTML
HTML 响应式 Web 设计
tryhtml_responsive_picture
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>根据浏览器宽度显示不同的图像</h2> <p>调整浏览器宽度，图像将在 600px 和 1500px 处发生变化。</p> <picture> <source srcset="/demo/images/img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="/demo/images/img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="/demo/images/flowers.jpg"> <img src="/demo/images/img_flowers.jpg" alt="鲜花" style="width:auto;"> </picture> </body> </html>