Меню ProgrammerBook.ru
ProgrammerBook.ru
/html/source/srcset:> Адреса альтернативных изображений_

Атрибут srcset

Синтаксис

HTML
<picture>
  ...
  <source srcset="[значение]">
  ...
  <img src="..." alt="...">
</picture>

Описание

Атрибут / параметр srcset указывает один или несколько адресов альтернативных изображений.

Условия использования

Если данный атрибут имеет строку URL-адреса альтернативного изображения с дескриптором ширины, то в элементе также необходимо указать атрибут «sizes», значением которого должен быть список допустимых размеров источника.

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

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 ---
5.0 4.7.8 The source element
5.1 4.7.4. The source element when used with the picture element
The srcset content...
XHTML
1.0 ---
1.1 ---

Значения

В качестве значения данного атрибута указывается одна или более строк допустимых непустых URL-адресов, каждый из которых отделен от следующего с помощью символа «,» ЗАПЯТАЯ [U+002C]. Если URL-адрес альтернативного изображения не имеет дескриптор и после этого URL-адреса не содержится ни одного пробела, то следующая строка кандидата в отображаемое изображение, если она присутствует, должна начинаться с одного или нескольких пробельных символов. Значение имеет следующий синтаксис:

URL (Дескриптор), ...,  URL (Дескриптор)

Дескрипторы:

  • Дескриптор ширины, состоящий из: пробельного символа, действительного неотрицательного целого числа (не включая ноль), представляющего значение дескриптора ширины и символа СТРОЧНОЙ ЛАТИНСКОЙ БУКВЫ «W» [U+0077]. (Например, «1024w».)
  • Дескриптор плотности пикселей, состоящий из: пробельного символа, действительного числа с плавающей запятой (не включая ноль), представляющего значение дескриптора плотности пикселей и символа СТРОЧНОЙ ЛАТИНСКОЙ БУКВЫ «X» [U+0078]. (Например, «1.5x».)

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр srcset (Элемент source)</title>
</head>
<body>
<h1>Пример использования атрибута "srcset"</h1>
<div>
<picture>
<source srcset="/examples/images/pineberry/480.png 853w, /examples/images/pineberry/720.png 1280w, /examples/images/pineberry/1080.png 1920w" type="image/png" sizes="65vw">
<source srcset="/examples/images/pineberry/360.jpg 1x, /examples/images/pineberry/480.jpg 1.5x, /examples/images/pineberry/720.jpg 2x, /examples/images/pineberry/1080.jpg 2.5x, /examples/images/pineberry/original.jpg 5x" type="image/jpeg">
<img src="/examples/images/pineberry/360.png" alt="Клубника «Пайнберри»">
</picture>
</div>
</body>
</html>
Параметр srcset (Элемент source)