Вказує розміри зображення для різних макетів сторінки. Різні значення та приклади використання наведено нижче.
Одне значення ширини. Тут 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> <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 пікселів відбувається і зменшення зображення.
Браузери
| 13 | 38 | 25 | 9 | 38 |
| 38 | 35 | 9.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
>- — елемент повністю підтримує тся браузером;
- — елемент браузером не сприймається та ігнорується;
- — під час роботи можлива поява різних помилок або елемент підтримується з застереженнями.
Число вказує версію браузреа, починаючи з якої елемент підтримується.
">