Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


HTML Атрибут sizes

Атрибут sizes (от англ. "sizes" — «размеры») определяет для элементов:

  • Для тега <link> — указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска. Этот атрибут разрешено использовать только, если установлен атрибут rel="icon".
  • Для тега <img> — задаёт размеры изображения для разных макетов страницы.
  • Для тега <source> — указывает список допустимых относительных размеров источника.

Синтаксис

<element sizes="[значение]">

Значения

Для тега <link>

any
Указывает, что ресурс содержит масштабируемую иконку (например, как это предусмотрено SVG изображением).
<размер>
Указывает точный размер иконки. Размер указывается в формате «<ширина><разделитель><высота>», где
  • <ширина> ‒ ширина иконки в пикселах без указания единиц (например, 16);
  • <разделитель> ‒ символ разделителя латинская буква x в верхнем (X) или нижнем регистре (x);
  • <высота> ‒ высота иконки в пикселах без указания единиц (например, 16).

Для тега <img>

<ширина>

Ширина может содержать практически любое значение длины, например, em, rem, pixels, и viewport width.

Однако, процентные значения не допускаются, "чтобы избежать путаницы в том, что будет относительно". Значение vw рекомендуется в качестве альтернативы, если требуется относительная величина.

Для тега <source>

В качестве значения указывается список допустимых размеров источника.

Значение по умолчанию

Нет.

Применяется к тегам

<link> <img> <source>

Примечание: Атрибут sizes работает только, когда элемент <source> расположен внутри элемента <picture>.

Отличия HTML 4.01 от HTML 5

Атрибут sizes был добавлен в HTML5.

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

Атрибут sizes (Элемент <link>)

Иконка с определенным размером:

Пример HTML:

Попробуй сам
<link rel="icon" href="favicon1.ico" type="image/x-icon" sizes="16x16">

Атрибут sizes (Элемент <img>)

При уменьшении ширины области просмотра браузера до 500 пикселей происходит уменьшение изображения:

Пример HTML:

Попробуй сам
<img 
    src="/../images/auto500.jpg"
    srcset="/../images/auto250.jpg 250w, /../images/auto500.jpg 500w" 
    sizes="(max-width: 500px) 250px, (min-width: 500px) 500px"
    alt="">

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

Атрибут sizes имеет следующую поддержку браузерами для каждого элемента:

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

Спецификация Статус
HTML 5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

Учебник HTML

HTML уроки: HTML Атрибуты