Атрибут sizes


	16	38	21	8	38


37	38	21	8

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

Одно значение ширины. Здесь vw — это ширина в процентах от области просмотра. В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты.

sizes="100vw"

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

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

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

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

Синтаксис

[ <размер исходника># , ]? <значение размера исходника>
  <медиа-запрос> <значение размера исходника>
  <размер>

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

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значение по умолчанию

Нет.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>sizes</title> </head> <body> <img src="image/mushroom.jpg" srcset="image/mushroom_portrait.jpg 350w, image/mushroom_landscape.jpg 650w" sizes="(max-width: 600px) 300px, (min-width: 600px) 600px" alt=""> </body> </html>

В данном примере при уменьшении ширины области просмотра браузера до 600 пикселей происходит и уменьшение изображения.