/html/source/sizes:> Относительные размеры_

Атрибут 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 4.7.8 The source element
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>
Параметр sizes (Элемент source)