Тег <picture>
Описание
Используется для создания контейнера под 1 изображение и элементов source.
Вот одни из функций, которые может выполнить элемент picture:
- для экранов ретина можно показывать картинку большего размера
- выводить рисунки разного размера для мобильных или настольных устройств - отображать изображения различных пропорций, учитывающих ориентацию устройства - выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать PNG, к примеру.
Для элемента доступны универсальные атрибуты и события.
См. код языков.
См. MIME - типы.
Синтаксис
<picture>
<source>
<img>
</picture>| Internet Explorer | Edge | Chrome | Opera | Safari | Firefox | Android WebView | Firefox для Android | Opera для Android | iOS Safari |
| 13 | 38 | 25 | 9.1 | 38 | 38 | 38 | 25 | 9.3 |
| Поддерживается | Частичная поддержка | Не поддерживается |
Атрибуты
Устаревшие атрибуты
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<!-- Браузеры поддерживающие picture отобразят картинку .png, а не поддерживающие в .jpg -->
<picture>
<source srcset='/files/images/regular/iconka.png'>
<img src='/files/images/regular/body-img.jpg' width='106' height='auto' alt='gki'>
</picture>
</body>
</html>
Читайте также
Тег <li>
Тег <span class='samp'>li</span> элемент списка <span class=&#...
Тег <dt>
Тег dt используется при создании списка dl и создает элемент с названием термина, который будет о...
Тег <svg>
Используется в качестве контейнера для создания векторных изображений.<br>Векторная графика...
Тег <source>
Создает источник для элементов <span class='samp'>audio, video и picture<...
Тег <input>
Создает текстовое поле, которое может использоваться в различных целях, например от простого ввод...