Å gjøre bilder responsive

  Nedenfor ser du først hvordan vi kan venstrejustere et bilde på en side som har tekst, og gjøre det responsivt. Formålet er å kunne vise både tekst og bilde på alle enheter.

I eksemplet nedenfor har vi satt inn et bilde som er 400 piksler bredt. Vi vil det venstrejustert, og bildet skal ha 40 % av sidebredden.

Slik ser bildet ut etter at det er satt inn i starten av teksten.

  1. Kopier html-koden, og lim den inn i høyrefeltet i den utvidede editoren vi kan bruke.

  2. Klikk på knappen du ser avbildet nedenfor slik at bildet venstrejusteres.

  3. Merk bildet og velg menyene Insert og Image

  4. I arkfanen skriver du inn 40% (uten mellomrom mellom siffer og prosenttegn) i det venstre feltet på Dimensions. Det siste feltet skal være tomt.

  1. Bytt arkfane til Advanced og skriv fyll inn feltene slik det er vist nedenfor. Velg OK.

  1. Kopier koden inn igjen i html-feltet i Canvas og lagre sida.

  2. Test virkningen ved å gjøre sida mindre, eller ved å prøve den på ulike enhet.