Атрибут sizes
Синтаксис
HTML
<picture>
...
<source srcset="..." sizes="[значение]">
...
<img src="..." alt="...">
</picture>
Описание
Атрибут / параметр sizes
(от англ. "sizes" ‒ «размеры») указывает список допустимых относительных размеров источника.
Примечание
Значения относительных размеров изображения рассчитываются относительно размера экрана.
Условия использования
Данный атрибут указывается только для альтернативных источников с дескрипторами ширины.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | |
5.1 | 4.7.4. The source element when used with the picture element ...the sizes content... |
XHTML | |
1.0 | |
1.1 |
Значения
В качестве значения данного атрибута указывается список допустимых размеров источника, имеющий следующую грамматику:
<размер-источника># [ , <значение-размера-источника> ]? | <значение-размера-источника>
где,
- <размер-источника>
- состоит из
<медиа-условие> <значение-размера-источника>
. - <медиа-условие>
- медиа-условие.
min-width: <число><ед.измерения>
илиmax-width: <число><ед.измерения>
- <значение-размера-источника>
- значение относительного размера изображения, указываемое в виде «
<число>vw
»;
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр sizes (Элемент source)</title>
</head>
<body>
<h1>Пример использования атрибута "sizes"</h1>
<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="(max-width: 1024px) 90vw, (min-width: 1440px) 35vw, 50vw">
<!--
90vw для экранов с шириной до 1024px;
35vw для экранов с шириной от 1440px;
50vw для экранов с остальным разрешением.
-->
<img src="/examples/images/pineberry/360.png" alt="Клубника «Пайнберри»">
</picture>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр sizes (Элемент source)</title>
</head>
<body>
<h1>Пример использования атрибута "sizes"</h1>
<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="(max-width: 1024px) 90vw, (min-width: 1440px) 35vw, 50vw">
<!--
90vw для экранов с шириной до 1024px;
35vw для экранов с шириной от 1440px;
50vw для экранов с остальным разрешением.
-->
<img src="/examples/images/pineberry/360.png" alt="Клубника «Пайнберри»">
</picture>
</body>
</html>
Параметр sizes (Элемент source)