<picture>

Комментарии

Содержание

Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Вот несколько областей применения <picture>:

  • для экранов ретина можно показывать картинку большего размера;
  • выводить рисунки разного размера для мобильных и настольных устройств;
  • отображать изображения разных пропорций, учитывающих ориентацию устройства;
  • выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать PNG.

Синтаксис

<picture>
  <source>
  <img>
</picture>

Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>picture</title> 
 </head> 
 <body> 
  <picture>
   <source srcset="image/html5-logo.svg">
   <img src="image/html5-logo.png" width="256" height="256" alt="HTML5">
  </picture> 
 </body> 
</html>

В данном примере используется два изображения: одно в формате SVG, а второе в привычном PNG. Браузеры, которые поддерживают элемент <picture>, отобразят картинку в векторном виде (рис. 1). Браузер IE покажет изображение в формате PNG (рис. 2). Для наглядности логотип дан размером 128х128 пикселей и увеличен до 256х256.

Картинка в формате SVG

Рис. 1. Картинка в формате SVG

Картинка в формате PNG

Рис. 2. Картинка в формате PNG

Спецификация ?

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры ?

Internet ExplorerEdgeChromeOperaSafariFirefox
1338259.138
AndroidFirefox MobileOpera MobileSafari Mobile
38359.3

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор: Влад Мержевич
Последнее изменение: 02.01.2017
Редакторы: Влад Мержевич

Рекомендуем