Помилка підключення. Спробуйте ще раз.

Перейти до вмісту
SEO Tools
Довідка та документація
UX / UI Середній вплив Просте 10–20 хв

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

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

Що це

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

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

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

Як це зробити

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

Приклад

Правильно
img { max-width: 100%; height: auto; }

Висновок

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

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