UX / UI Közepes hatás Egyszerű 10–20 perc

Reszponzív képek

A képeknek el kell férniük mobilon vízszintes görgetés nélkül.

Mi ez

A fix nagy szélességű kép (pl. width="1200") egy keskeny mobilon túlfolyhat a képernyőn kívülre, és vízszintes görgetést okozhat az egész oldalon.

Miért foglalkozzon vele

A vízszintes görgetés az egyik legbosszantóbb UX probléma mobilon, szétzilálja a layoutot és befejezetlennek hat. Egyetlen CSS szabállyal könnyen megelőzhető.

Hogyan csinálja

1Adjon a képeknek max-width: 100% és height: auto értéket.
2Adja meg a width és height értéket a HTML-ben a layout stabilitása érdekében (CLS), de korlátozza őket CSS-ben.
3Különböző méretekhez fontolja meg a srcset / <picture> használatát.
4Tesztelje keskeny szélességen (~360px), hogy semmi nem mozdul-e el vízszintesen.

Példa

Helyesen

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

Összegzés

Egyetlen szabály (max-width:100%; height:auto) megoldja a képek túlfolyásának nagy részét mobilon. Egészítse ki a méretekkel a HTML-ben a CLS miatt, és nagy vizuáloknál fontolja meg a srcsetet. Gyors javítás egy gyakori mobilos bajra.

Kapcsolódó témák