Элемент | ||||||
<link> | ||||||
<img> | 38+ | 25+ | Да | 9+ | 38+ | |
<source> | 38+ | 25+ | Да | 9+ | 38+ |
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>)
Иконка с определенным размером:
Атрибут 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 Атрибуты
