From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/picture/index.html | 107 +++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 files/ru/web/html/element/picture/index.html (limited to 'files/ru/web/html/element/picture') diff --git a/files/ru/web/html/element/picture/index.html b/files/ru/web/html/element/picture/index.html new file mode 100644 index 0000000000..bba3bab963 --- /dev/null +++ b/files/ru/web/html/element/picture/index.html @@ -0,0 +1,107 @@ +--- +title: Элемент +slug: Web/HTML/Element/picture +tags: + - HTML + - Встроенный контент + - Элемент picture +translation_of: Web/HTML/Element/picture +--- +
{{HTMLRef}}
+ +

HTML-элемент <picture> служит контейнером для одного или более элементов {{HTMLElement("source")}} и одного элемента {{HTMLElement("img")}} для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов  <source> и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов <source> найдено не будет, то будет выбран файл, указанный  атрибутом  {{htmlattrxref("src", "img")}} элемента <img> . Затем выбранное изображение отображается в пространстве, занятом элементом <img>. 

+ +

Чтобы выбрать оптимальное изображение, {{Glossary("user agent")}}  анализирует атрибуты {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, и {{htmlattrxref("type", "source")}} элемента <source> и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

+ +

Элемент <picture> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Категории контентаПотоковый контент, фразовый контент, встроенный контент
Разрешённый контент Ноль или более элементов {{HTMLElement("source")}}, затем один элемент {{HTMLElement("img")}}, при необходимости смешанный с элементами поддержки сценариев.
Пропуск теговНет. Открывающий и закрывающий тег являются обязательными.
+
Разрешённые родителиЛюбой элемент, который разрешает встроенный контент
Разрешённые ARIA rolesНет
DOM interface{{domxref("HTMLPictureElement")}}
+ +

Атрибуты

+ +

Этот элемент содержит только универсальные атрибуты.

+ +

Примеры

+ +

Эти примеры демонстрируют влияние различных атрибутов элемента {{HTMLElement("source")}} на выбор изображения, которое будет отображаться при их использовании внутри тега <picture>.

+ +

Атрибут media

+ +

Атрибут media позволяет определить медиа-запрос, который веб-браузер будет анализировать для выбора элемента {{HTMLElement("source")}}. Если медиа-запрос определяется как ложный (false), то элемент {{HTMLElement("source")}} пропускается.

+ +
<picture>
+ <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
+ <img src="mdn-logo-narrow.png" alt="MDN">
+</picture>
+
+ +

Атрибут type

+ +

Атрибут type позволяет Вам обозначить MIME-тип данных, указанных в атрибуте srcset элемента {{HTMLElement("source")}}. Если браузер не подерживает данный тип, то элемент  {{ HTMLElement("source")}} опускается.

+ +
​<picture>
+ <source srcset="mdn-logo.svg" type="image/svg+xml">
+ <img src="mdn-logo.png" alt="MDN">
+</picture>
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}{{Spec2('HTML WHATWG')}}Первоначальное определение
+ +

Браузерная совместимость

+ + + +

{{Compat("html.elements.picture")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf