UX / UI Середній вплив Просте 10–20 хв

Адаптивні зображення

Зображення мають вміщатися на мобільному без горизонтального прокручування.

Що це

Зображення з жорсткою великою шириною (напр., width="1200") може на вузькому мобільному вийти за межі екрана й спричинити горизонтальне прокручування всієї сторінки.

Чому це важливо

Горизонтальне прокручування, одна з найдратівливіших UX-проблем на мобільному, воно руйнує макет і справляє враження незавершеності. Йому легко запобігти єдиним правилом у CSS.

Як це зробити

1Дайте зображенням max-width: 100% та height: auto.
2Вказуйте width та height у HTML заради стабільності макета (CLS), але обмежте їх у CSS.
3Для різних розмірів розгляньте srcset / <picture>.
4Протестуйте на вузькій ширині (~360px), чи нічого не зсувається по горизонталі.

Приклад

Правильно

img { max-width: 100%; height: auto; }

Висновок

Єдине правило (max-width:100%; height:auto) вирішує більшість випадків виходу зображень за межі на мобільному. Додайте розміри в HTML заради CLS, а для великих візуалів розгляньте srcset. Швидке виправлення частої мобільної вади.

Повʼязані теми