The Element in html5 shows not different images by resize

问题

I found this code : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture

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>

回答1:

you have to use image source properly

<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>

回答2:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://www.abc.net.au/news/image/8281088-16x9-940x529.jpg">
  <source media="(min-width: 465px)" srcset="https://static-news.moneycontrol.com/static-mcnews/2018/12/Google-770x433.jpg">
  <img src="https://www.irishtimes.com/polopoly_fs/1.3722378.1544095168!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

I have tried the same example and it's working fine for me.

来源：https://stackoverflow.com/questions/56491042/the-picture-element-in-html5-shows-not-different-images-by-resize

标签

html

image

responsive-design

The <picture> Element in html5 shows not different images by resize

问题

回答1:

回答2: