HTML-тег `<picture>`

Элемент <picture> является контейнером для одного или более элементов <source> и одного элемента <img>, который является последним дочерним элементом в блоке.

Элемент <source> содержит версии изображения для различных сценариев отображения на разных устройствах. Элемент <img> описывает размер изображения и другие атрибуты. Браузер рассматривает каждый дочерний элемент <source> и загружает наиболее подходящий вариант. Если совпадений не найдено, браузер отображает изображение, указанное в теге <img>.

Элемент <picture> позволяет указывать несколько изображений для лучшей адаптации к различным размерам области просмотра, избегая необходимости масштабирования одного изображения. Он может использоваться для следующих целей:

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

Примечание: Свойства object-position и object-fit применяются к элементу <img> (резервному варианту) для управления его размером и выравниванием внутри контейнера.

Тег <picture> появился в HTML5.

Синтаксис

Тег <picture> является парным. Содержимое записывается между открывающим (<picture>) и закрывающим (</picture>) тегами.

HTML-тег <picture>

html

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Пример использования HTML-тега `<picture>`:

HTML-тег <picture>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Try it Yourself »

Браузер последовательно оценивает элементы <source> и загружает первый, чей запрос media соответствует текущей области просмотра. Если ни один <source> не подходит, происходит возврат к элементу <img>. Элемент <picture> широко поддерживается во всех современных браузерах.

Атрибуты

Эти атрибуты применяются к элементам <source> внутри <picture>:

Атрибут	Значение	Описание
media	media_query	Указывает медиазапрос для соответствия размеру области просмотра.
srcset	URL	Указывает URL изображения, которое следует использовать в различных ситуациях.
sizes	length	Указывает ширину изображения для различных размеров области просмотра.
type	MIME_type	Указывает MIME-тип связанного ресурса (например, `image/webp`).
src	URL	Указывает URL изображения. Используется как альтернатива `srcset`.

Каждый элемент <source> должен содержать либо атрибут srcset, либо src. Элемент <img> (резервный вариант) использует атрибут src.

Тег <picture> поддерживает Глобальные атрибуты.

Практика

Какова функция HTML-тега <picture>?

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

HTML-тег <picture> ​

Синтаксис ​

Пример использования HTML-тега <picture>: ​

Атрибуты ​

Практика ​

HTML-тег `<picture>`

Синтаксис

Пример использования HTML-тега `<picture>`:

Атрибуты

Практика