Untitled

avatar
unknown
html
2 years ago
1.8 kB
4
Indexable
<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <picture>
   <source media="(min-width: 650px)" srcset="https://w7.pngwing.com/pngs/714/762/png-transparent-face-sticker-decal-github-face-face-people-smiley.png">
   <source media="(min-width: 465px)" srcset="img_girl.jpg">
   <img src="https://avatars.mds.yandex.net/i?id=f45544bcfc88aa3124c6b86f65c66edae83fe48b-4079353-images-thumbs&n=13&exp=1" style="width:auto">
  </picture>

  <p>Измените размер браузера, чтобы увидеть различные версии загрузки изображения в разных размерах видового экрана.
  Браузер ищет первый исходный элемент, в котором медиа-запрос соответствует текущей ширине видового экрана пользователя,
  и извлекает изображение, указанное в атрибуте srcset.</p>

  <p>Элемент img требуется в качестве последнего дочернего тега блока объявления изображения.
  Элемент img используется для обеспечения обратной совместимости для браузеров, которые не поддерживают элемент picture, или если ни один из исходных тегов не соответствует.</p>

  <p><strong>Примечание:</strong> Элемент picture не поддерживается в IE12 и более ранних версиях или Safari 9.0 и более ранних версиях.</p>

 </body>
</html>
Editor is loading...