HTML тег <picture>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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