HTML <picture> тег

  • Предыдущая страница <param>
  • Следующая страница <pre>

Определение и использование

<picture> Теги позволяют веб-разработчикам быть более гибкими при указании ресурсов изображений.

<picture> Наиболее частое использование элемента - это адаптивный дизайн с точки зрения искусства. Можно спроектировать несколько изображений, чтобы лучше заполнить окно просмотра браузера, а не масштабировать одно изображение пропорционально ширине окна просмотра.

<picture> Элемент содержит два тега: один или несколько <source> тег и <img> тег.

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

Совет:<picture> Работа элементов <video> и <audio> Аналогично. Вы можете установить различные источники, и будет использован первый источник, соответствующий предпочтениям.

Дополнительная литература:

HTML учебник:HTML <picture> элемент

CSS учебник:CSS Responsive Design - Изображения

Пример

<picture> Метод использования тега:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Попробуйте сами

Глобальные свойства

<picture> Этот тег также поддерживает Глобальные свойства в HTML.

Свойства событий

<picture> Этот тег также поддерживает Свойства событий в HTML.

Поддержка браузерами

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0
  • Предыдущая страница <param>
  • Следующая страница <pre>