Атрибут sizes

Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.

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

Одно значение ширины. Здесь vw — это ширина в процентах от области просмотра.

sizes="100vw"

Медиа-запрос с одним значением ширины. В данном случае в качестве контрольной точки задано 40em.

sizes="(min-width: 40em) 100vw"

Список размеров, перечисленный через запятую. В значениях можно указывать медиа-запросы и функцию calc().

sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

Синтаксис

<picture>
 <source sizes="[<размер исходника># ,]? <значение размера исходника>
  <медиа-запрос> <значение размера исходника>
  <размер>">
</picture>

<значение размера исходника> не допускает проценты, используйте только единицы vw.

Нет.


	16	38	25	9.1	38


4.4	4	14	2

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.