UX / UI Średni wpływ Łatwe 10–20 min

Responsywne obrazy

Obrazy muszą mieścić się na telefonie bez poziomego przewijania.

Co to jest

Obraz o sztywnej dużej szerokości (np. width="1200") może na wąskim telefonie wystawać poza ekran i powodować poziome przewijanie całej strony.

Dlaczego warto to rozwiązać

Poziome przewijanie to jeden z najbardziej irytujących problemów UX na telefonie, rozbija układ i sprawia wrażenie niedokończenia. Łatwo mu zapobiec jedną regułą w CSS.

Jak to zrobić

1Nadaj obrazom max-width: 100% oraz height: auto.
2Podawaj width i height w HTML ze względu na stabilność układu (CLS), ale ogranicz je w CSS.
3Dla różnych wielkości rozważ srcset / <picture>.
4Przetestuj na wąskiej szerokości (~360px), czy nic nie przewija się poziomo.

Przykład

Dobrze

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

Podsumowanie

Jedna reguła (max-width:100%; height:auto) rozwiązuje większość przelewania obrazów na telefonie. Uzupełnij wymiary w HTML ze względu na CLS, a przy dużych wizualach rozważ srcset. Szybka naprawa częstej mobilnej bolączki.

Powiązane tematy