Responsive billeder – tilpas automatisk til skærmstørrelse

Her er et trick til hvordan du kan få dine billeder til automatisk at tilpasse sig i størrelsen alt efter om den besøgende ser din hjemmeside på for eksempel mobil eller en computer på skrivebord.

1. Gå ind i tekst/billede redigering

Hvis det er i design visning (også kaldet Layout Builder) så klik på tandhjulet eller dobbeltklik for at redigere billedet.

Ved redigering af varer m.v. ser det nogenlunde tilsvarende ud.

2. Vælg kildekode

Via ‘Værktøj’ og derefter ‘<> Kildekode’

3. Indsæt magisk kode

Lige efter koden hvor der står

<img

skal du indsætte et mellemrum og dette stykke kode:

class="img-responsive"

således at der samlet set står som i dette eksempel:

4. Gem og test

Du kan nu gemme siden du er på (i layout builder helt øverst) og prøve at ændre størrelse på browseren eller f.eks. finde din mobil frem og prøve at besøge siden med billedet.