САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <picture>



Пример

Как использовать тег <picture>:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Цветы" style="width:auto;">
</picture>
Попробуйте сами »

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

Тег <picture> дает веб разработчикам большую гибкость в определении ресурсов изображений.

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

Тег <picture> содержит два тега: один или несколько тегов <source> и один тег<img>.

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

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


Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.

Элемент
<picture> 38.0 13.0 38.0 9.1 25.0

Глобальные атрибуты

Тег <picture> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <picture> также поддерживает События атрибутов в HTML.


Связанные страницы

CSS Учебник: CSS Адаптивный дизайн - изображений