| Элемент | ||||||
| <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 Атрибуты
