| 16 | 38 | 25 | 9.1 | 38 |
| 4.4 | 4 | 14 | 2 |
Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.
Атрибут 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.
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Нет.