Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.
Одно значение ширины. Здесь 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.
Значение по умолчанию
Нет.
Пример
<!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 пикселей происходит и уменьшение изображения.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.