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