Атрибут sizes
Обновлено: 23.06.2022
Атрибут sizes
Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.
Одно значение ширины. Здесь 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.
Значение по умолчанию
Нет.