Layouten er responsiv og tilpasser seg fint når du krymper nettleservinduet. Men bildene gjør det ikke. De beholder sin opprinnelige størrelse og sprenger ut av kolonnene, skaper horisontal scrolling og ødelegger hele designet. Responsive bilder i CSS løser dette problemet, og det krever overraskende lite kode. To CSS-egenskaper er alt du trenger for at bildene skal flyte med resten av layouten.
Responsive bilder med max-width i CSS
Løsningen er å sette max-width: 100% og height: auto på bildene. Max-width på 100 prosent betyr at bildet aldri kan bli bredere enn forelderelementet sitt. Er kolonnen 300 piksler bred, blir bildet maks 300 piksler. Er kolonnen 600 piksler, kan bildet bli opptil 600 piksler. Height auto sørger for at høyden skaleres proporsjonalt, slik at bildet ikke strekkes eller klemmes.
Du kan sette denne regelen på alle img-elementer på en gang. Da trenger du ikke tenke på hvert enkelt bilde. Alle bilder på siden tilpasser seg automatisk til containeren de ligger i.
Hvorfor bredde og høyde i HTML fortsatt er viktig
Selv om CSS styrer den responsive skalereringen, bør du alltid definere width og height direkte på img-elementet i HTML-en. Grunnen er at nettleseren ikke kjenner bildets dimensjoner før det er lastet inn. Uten bredde og høyde vet ikke nettleseren hvor mye plass bildet trenger, og resten av innholdet hopper nedover når bildet plutselig dukker opp.
Når du angir dimensjonene i HTML-en, reserverer nettleseren riktig plass med en gang. Teksten som ligger under bildet, forblir på plass mens bildet lastes. Denne effekten kalles å unngå layout shift, og den gir en merkbart bedre brukeropplevelse. Les mer om bilder i HTML for riktig oppsett av img-elementer.
Object-fit: kontroll over beskjæring
Noen ganger trenger du at bildet fyller en bestemt størrelse uten å endre proporsjoner. Da bruker du object-fit. Med verdien cover fyller bildet hele arealet og beskjærer det som ikke passer. Med contain vises hele bildet innenfor arealet, men det kan oppstå tomrom på sidene.
Object-fit er spesielt nyttig for bildekort i en grid der alle kort skal ha lik høyde. Uten object-fit ville bilder med ulike proporsjoner gitt ujevne kort. Med object-fit cover ser alle bildene like store ut, uavhengig av originalformatet.
Bilder i en responsiv layout
Når bilder ligger inne i et responsivt kolonnesystem, fungerer max-width: 100% sømløst. Kolonnen krymper med skjermbredden, og bildet krymper med kolonnen. Du trenger ikke skrive separate media queries for bildene. De følger kolonnebredden automatisk.
Bildene bør likevel ikke være unødvendig store. Et bilde på 4000 piksler som alltid vises i en kolonne på maks 600 piksler, kaster bort båndbredde. Bruk bilder som er tilpasset den største størrelsen de faktisk vises i. For avanserte oppsett kan du lese om responsive bilder på MDN, inkludert srcset og sizes-attributtene i HTML.
Vanlige feil med responsive bilder
Den vanligste feilen er å bruke width: 100% i stedet for max-width: 100%. Forskjellen er at width: 100% tvinger bildet til alltid å fylle hele bredden, selv om originalbildet er mindre. Et bilde på 200 piksler strekkes til 600 piksler og blir uskarpt. Med max-width: 100% kan bildet aldri bli større enn forelderelementet, men det blir heller ikke strukket utover sin naturlige størrelse.
En annen feil er å sette en fast height i piksler sammen med max-width. Da mister bildet proporsjonene sine når bredden endres. Hold deg til height: auto med mindre du bevisst bruker object-fit for å fylle et bestemt areal.
Lær mer om responsive bilder med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du å:
- Gjøre bilder responsive med CSS i en komplett responsiv layout
- Kombinere bildestiling med boksmodellen for riktig avstand og plassering
- Bygge responsive nettsider med bilder, tekst og layout fra bunnen av
