Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>图片元素</h2> <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg" style="width:auto;"> </picture> <p>调整浏览器大小以查看不同视口大小下加载的不同版本的图片。 浏览器寻找媒体查询与用户当前视口宽度匹配的第一个源元素， 并获取 srcset 属性中指定的图像。</p> <p>img 元素需要作为图片声明块的最后一个子标记。 img 元素用于为不支持 picture 元素的浏览器提供向后兼容性，或者如果没有匹配的源标记。 </p> <p><strong>注意：</strong>图片元素在 IE12 及更早版本或 Safari 9.0 及更早版本中不受支持。</p> </body> </html>