Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег picture HTML

Тег picture HTML

HTML элемент <picture> — это контейнер для одного или нескольких элементов <source> и одного элемента <img>, который является последним дочерним элементом в блоке.

Тег <picture> - синтаксис и код

Тег <picture> представлен парами. Содержимое записывается между открывающим (<picture>) и закрывающим (</picture>) тегами.

Пример кода, который показывает разные изображения для разных размеров экрана:

<picture>
  <source media="(min-width: 650px)" srcset="img_duck.jpg">
  <source media="(min-width: 465px)" srcset="img_tree.jpg">
  <img src="img_vortex.jpg">
</picture>

Измените размер окна браузера, чтобы увидеть, как это работает.

★ Примечание: всегда указывайте элемент <img> в качестве последнего дочернего элемента - элемента <picture>. Элемент <img> используется браузерами, которые не поддерживают элемент <picture> или если ни один из тегов <source> не совпадает.

Определение и использование

Тег <picture> является новым в HTML5;
HTML тег <picture> дает веб-разработчикам больше гибкости при указании ресурсов изображений;
Элемент <picture> содержит два тега: один или несколько тегов <source> и один тег <img>.

Чаще всего элемент <picture> используется для художественного оформления адаптивного дизайна. Вместо одного изображения, которое масштабируется вверх или вниз в зависимости от ширины области просмотра, можно создать несколько изображений, чтобы более красиво заполнить область просмотра браузера.

Браузер будет искать первый элемент <source>, где медиа-запрос соответствует текущей ширине области просмотра, а затем отобразит правильное изображение (указанное в атрибуте srcset). Элемент <img> требуется как последний дочерний элемент элемента <picture> в качестве запасного варианта, если ни один из исходных тегов не соответствует.

★ Примечание: элемент <picture> работает "аналогично" <video> и <audio>. Вы настраиваете разные источники, и используется первый источник, соответствующий предпочтениям.