0

Тег <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>
gki

Читайте также