Вказує розміри зображення для різних макетів сторінки. Різні значення та приклади використання наведено нижче.
Атрибут 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)"
Синтаксис
<code> <picture> <source sizes="[<розмір вихідного коду># ,]? <значення розміру вихідного коду> <медіа-запит> <значення розміру вихідного коду> <розмір>"> </picture>
<значення розміру вихідного коду> не допускає відсотки, використовуйте тільки одиниці vw.
Значення за замовчуванням
Ні.
Браузери
| 13 | 38 | 25 | 9 | 38 |
| 38 | 35 | 9.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — елемент повністю підтримується браузером;
- — елемент браузером не сприймається і ігнорується;
- — при роботі можливо поява різних помилок, або елемент підтримується з застереженнями.
Число вказує версію браузреа, починаючи з якої елемент підтримується.
>Автор та редактори
Останнє змінення: 26.11.2016
Редактори: Влад Мержевич