A csatlakozás sikertelen. Kérjük, próbálja újra.

Ugrás a tartalomhoz
SEO Tools
Súgó és dokumentáció
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

  1. 1Adjon a képeknek max-width: 100% és height: auto értéket.
  2. 2Adja meg a width és height értéket a HTML-ben a layout stabilitása érdekében (CLS), de korlátozza őket CSS-ben.
  3. 3Különböző méretekhez fontolja meg a srcset / <picture> használatát.
  4. 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