English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Элемент HTML <picture> предоставляет версии изображений для различных сценариев отображения/устройств, содержа один или несколько элементов <source> и один элемент <img>. Браузер выбирает наиболее подходящий подэлемент <source>, если соответствия нет, выбирается URL из атрибута src элемента <img>. Затем выбранное изображение отображается в пространстве элемента <img>.
Показывать разные изображения в зависимости от размеров экрана, если не найдено соответствие или браузер не поддерживает атрибут picture, использовать элемент img:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <h2>элемент picture</h2> <picture> <source media="(min-width: 650px)" srcset="/run/html/views.png"> <source media="(min-width: 465px)" srcset="/run/html/default.jpg"> <img src="/run/html/haha.gif" style="width:auto;"> </picture> </body> </html>Проверьте, как это выглядит ‹/›
Элемент picture позволяет отображать различные изображения на различных устройствах и обычно используется для адаптивного дизайна.
HTML5 ввел элемент <picture>, который позволяет более гибко адаптировать ресурсы изображений.
Элемент <picture> может содержать ноль или несколько элементов <source> и один элемент <img>, каждый элемент <source> соответствует различным устройствам и указывает на различные источники изображений. Если совпадение не найдено, выбирается url из атрибута src элемента <img>.
Внимание:
Элемент <img> находится в последнем <picture> Если браузер не поддерживает этот атрибут, отображается изображение из элемента <img>. Числа в таблице указывают на первую версию браузера, поддерживающую этот элемент.
IEFirefoxOperaChromeSafari
Свойство <picture> определено как новое в HTML5.
Поддержка тега <picture> Глобальные свойства HTML.
Поддержка тега <picture> Событийные свойства HTML.