<img sizes>

sizes - розміри зображення srcset.

Синтаксис:

Параметри:

<img> - тег img.

size1, size2, sizeN - розмір зображення. Вказується у px, cm, vm.

Увага! Замість % необхідно використовувати vm.

Опис:

sizes атрибут тегу img який задає розмір відображення зображення при використані srcset.

Використовується для адаптивного зображення, щоб браузер вибирав оптимальне зображення відповідно до розміру екрану, розміру вікна браузера.

У атрибуті sizes вказуєтьсяються в якому розмірі відображати зображення у різних умовах вказаних у медіа-запиті (media queries). Розміри вказуєтьсяються через кому, один або декілька. Кожен параметр розміру містить:

• медіа запит ("min-width:320px", "max-width:320px" і т.п.) а також умови and і or.
• розмір джерела зображення ("320px", "100vw", і т.п.)

Можливо використовувати тільки з атрибутом srcset.

HTML5 vs HTML4

Атрибут sizes входить у специфікацію HTML5.

Приклад:

img src="/_images/textura_2048x1365.png" srcset="/_images/textura_300x204.png 300w, /_images/textura_768x524.png 768w, /_images/textura_1024x796.png 1024w, /_images/textura_2048x1365.png 2048w" sizes="(min-width:320px) 280px, (min-width:768px) 620px, (min-width:1024px) 1000px, 2000px">

<img srcset="/_images/textura_300x204.png 280w, /_images/textura_768x524.png 720w, /_images/textura_1024x796.png 1000w" sizes="((min-width: 10px) and (max-width: 450px)) 300px, ((min-width: 450px) and (max-width: 700px)) 620px, (min-width: 700px) 95vw">