<img> / Атрибут 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.

Обязательный атрибут

Нет.

Значение по умолчанию

Нет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>sizes</title>
 </head>
 <body>
  <img
    src="images/mushroom.jpg"
    srcset="images/mushroom_portrait.jpg 350w, images/mushroom_landscape.jpg 650w"
    sizes="(max-width: 600px) 300px, (min-width: 600px) 600px"
    alt="">
 </body>
</html>

В данном примере при уменьшении ширины области просмотра браузера до 600 пикселей происходит и уменьшение изображения.

Браузеры: Настольные Мобильные ?

Internet Explorer	Edge	Chrome	Opera	Safari	Firefox
	13	38	25	9	38

Android	Firefox Mobile	Opera Mobile	Safari Mobile
	38	35	9.2

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.