Атрибут sizes
HTML5
Оновлено: 17.06.2022
Атрибут sizes
Задає розміри зображення для різних макетів сторінки. Різні значення та приклади використання показано нижче.Одне значення ширини. Тут 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.
Значення за замовчуванням
Немає.
Приклад
У цьому прикладі при зменшенні ширини області перегляду браузера до 600 пікселів відбувається зменшення зображення.