САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <source> атрибут srcset

❮ HTML <source> тег

Пример

Элемент <picture> с двумя исходными файлами и резервным изображением:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Цветы" style="width:auto;">
</picture>
Попробуйте сами »

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

Атрибут srcset указывает URL изображения, который будет использоваться в различных ситуациях.

Этот атрибут является обязательным, когда используется <source> в <picture>.


Поддержка браузеров

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

Атрибут
srcset 38.0 13.0  38.0 9.1 25.0

Синтаксис

<source srcset="URL">

Значение атрибутов

Значение Описание
URL Указывает URL изображения.

Возможные значения:

  • Абсолютный URL - указывает на другой сайт (например, href="http://www.example.com/flower.jpg")
  • Относительный URL - указывает на файл внутри сайта (например, href="flower.jpg")

❮ HTML <source> тег