Połączenie nie powiodło się. Spróbuj ponownie.

Przejdź do treści
SEO Tools
Pomoc i dokumentacja
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ć

  1. 1Nadaj obrazom max-width: 100% oraz height: auto.
  2. 2Podawaj width i height w HTML ze względu na stabilność układu (CLS), ale ogranicz je w CSS.
  3. 3Dla różnych wielkości rozważ srcset / <picture>.
  4. 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