Пример
Как использовать тег <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> - это адаптация изображений под разные условия (art direction) в отзывчивом дизайне. Вместо одного изображения, которое масштабируется в зависимости от ширины области просмотра, можно подготовить несколько изображений, которые более оптимально заполняют область просмотра браузера.
Элемент <picture> содержит два типа тегов: один или несколько тегов <source> и один тег <img>.
Браузер будет искать первый элемент <source>, медиазапрос которого соответствует текущей ширине области просмотра, а затем отобразит соответствующее изображение (указанное в атрибуте srcset). Элемент <img> обязателен в качестве последнего дочернего элемента <picture> и служит запасным вариантом, если ни один из тегов <source> не подошел.
Совет: Элемент <picture> работает "аналогично" элементам <video> и <audio>. Вы задаете разные источники, и используется первый источник, соответствующий заданным условиям.
Поддержка браузерами
Цифры в таблице указывают первую версию браузера, полностью поддерживающую элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Глобальные атрибуты
Тег <picture> также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег <picture> также поддерживает атрибуты событий в HTML.
Связанные страницы
Учебник HTML: HTML элемент <picture>
Учебник CSS: CSS отзывчивый дизайн - Изображения