Синтаксис
<picture>
<source srcset="...">
<img src="..." alt="...">
</picture>
Описание
Тег <picture> (от англ. picture — картинка, изображение) позволяет загружать несколько вариантов изображения, оптимизированных под различные размеры и другие параметры экрана.
Внутри контейнера <picture> размещается один тег <img> и один или более тегов <source>.
В каждом теге <source> содержится имя файла альтернативных версий изображения, а также условия, при которых браузер должен их загрузить. Браузер по очереди рассматривает содержание дочерних тегов <source>, и в случае, если ни одно из указанных условий для загрузки изображений не может быть удовлетворено, браузер загружает изображение, указанное в теге <img>.
Тег <picture> работает аналогично тегам <video> и <audio>. Вы устанавливаете различные источники, и первый источник, который соответствует предпочтениям, используется.
Тег поддерживает глобальные атрибуты и атрибуты события.
Пример
HTML-код:
Отображение в браузере:
Параметры CSS по умолчанию
Нет.
Поддержка браузера
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
<picture> | Да | Да | Да | Да | Да |
Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!
Только свежие новости программирования и технологий каждый день.
Комментарии