САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ
Баннер ТОП

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="Flowers" style="width:auto;">
</picture>
Попробуйте сами »

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

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

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

Элемент <picture> содержит два разных тега: один или несколько тегов <source> и один тег <img>.

Элемент <source> имеет следующие атрибуты:

  • srcset (обязательный) - определяет URL изображения для отображения
  • media - принимает любой допустимый медиа-запрос, который обычно определяется в CSS
  • sizes - определяет один дескриптор ширины, один медиазапрос с дескриптором ширины или разделенный запятыми список медиазапросов с дескриптором ширины
  • type - определяет MIME тип

Браузер будет использовать значения атрибутов для загрузки наиболее подходящего изображения. Браузер будет использовать первый элемент <source> с соответствующей подсказкой и игнорировать любые последующие теги <source>.

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

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


Поддержка браузерами

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

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

Различия между HTML 4.01 и HTML5

Тег <picture> новый в HTML5.


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

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


Атрибуты событий

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


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

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