Элемент <picture>в html5 показывает не разные изображения при изменении размера - PullRequest
Новая
       29

Элемент <picture>в html5 показывает не разные изображения при изменении размера

1 голос
/ 07 июня 2019

Я нашел этот код: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture

Я попробовал его во всех своих браузерах, и он работает правильно. Но я, когда копирую код и меняю размер своего браузера, показывается только тег img. Спасибо за любую помощь. 

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

Ответы [ 2 ]

4 голосов
/ 07 июня 2019 

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

Я попробовал тот же пример, и он отлично работает для меня.

1 голос
/ 07 июня 2019

Вы должны правильно использовать источник изображения 

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