Атрибут 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 пікселів відбувається зменшення зображення.

Браузери

img:sizes

Переглянути сумісність з Can I use?

img:sizes