<图片>html5中的元素通过调整大小显示没有不同的图像 [英] The <picture> Element in html5 shows not different images by resize
本文介绍了<图片>html5中的元素通过调整大小显示没有不同的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我找到了这个代码:https://www.w3schools.com/html/tryit.asp?filename=试试html_images_picture
我已经在我所有的浏览器上尝试过它，并且它运行正常.但是当我复制代码并调整浏览器大小时，只显示 img 标签.感谢您的帮助.
I have tried it on all my browsers and it's been working properly. But I when I copy the code and I resize my browser, Only img tag is shown. Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="Blume 1.jpg">
<source media="(min-width: 465px)" srcset="Blume 2.jpg">
<img src="Blume 3.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>推荐答案
你要正确使用图片源
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg">
<img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>这篇关于<图片>html5中的元素通过调整大小显示没有不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
