I. Billeder som indhold på siden

Når jeg går i gang med at lave en hjemmeside, er det nødvendigt at lave forskellige layouts til forskellige størrelser skærme - dette er en del af begrebet 'responsivt layout'. Er der fotos eller grafik - herefter kaldet "billeder" for nemheds skyld - på hjemmesiden, skal de kunne ændre størrelse afhængigt af skærmstørrelsen på den enhed der viser hjemmesiden.

Almindelige billeder versus baggrundsbilleder

Metoden hvorpå et billede skaleres, afhænger delvist af hvilken sammenhæng billedet optræder i – fungerer det som en baggrund for sidens indhold, vil jeg oftest foretrække en CCS3-baseret løsning, og er billedet en del af sidens indhold for eksempel indsat mellem to tekstafsnit, vil jeg bruge skalering ved hjælp af CSS2.


II. Billeder som replaced elements

Når jeg indsætter et billede på hjemmesiden, opbevares det i HTML-elementet 'img'. 'img'-elementer hører til i gruppen af 'replaced elements', og opfører sig sig en smule anderledes end almindelige block- og inline-elementer - for 'img' gælder det, at elementet indsættes på siden med en predefineret styling for højde og bredde svarende til billedets originale mål i pixels.

Billedet vil derfor altid blive forsøgt vist i sin originale størrelse, og bruger jeg en HTML-editor til at indsætte billedet på siden, kan man nogle gange opleve, at billedets originale mål for højde og bredde automatisk indsættes i koden:

HTML
<img src="images/meeting.jpg" width="700" height="215" />  

Unitless values versus inline styling

Læg mærke til at angivelserne for højde og bredde ikke har en endelse og kun består af tal - rent faktisk ikke er de "rigtige" værdier, men 'unitless values' - alligevel refererer de til billedets originale størrelse målt i værdien pixels. Selv hvis jeg sletter angivelserne i koden, vil billedet stadig blive forsøgt vist i sin originale størrelse indtil andet er angivet i CSS.

Værdierne i elementet 'img' må ikke forveksles med 'inline-styling', som er styling direkte i HTML-elementet. For almindelige HTML-elementer, som ikke hører til i gruppen 'replaced elements', gælder det, at 'inline-styling' vil neutralisere værdier for højde og bredde angivet i det eksterne stylesheet eller i 'head' af siden.

Dette gælder ikke for billeder - først når højde og bredde er angivet i CSS, vil elementets 'unitless values' overskrives:

HTML
<img src="images/meeting.jpg" width="700" height="215" />  <-- KAN SLETTES -->
CSS
img {
    width: 700px;
    height: 215px;
}

III. Skalering af billeder med procent

Når et billede er indsat som en del af sidens indhold, bruges billedets bredde oftest som udgangspunktet for skaleringen. Billedets bredde angives med en dynamisk værdi som for eksempel procent, mens højden gives værdien 'auto' - 'auto' udmåler altid højden proportionalt i forhold til værdien for bredden, så billedets rette proportioner bevares.

Har jeg slettet elementets eventuelle 'unitless values' og defineret en bredde i CSS, ændres højden automatisk til 'auto' så 'aspect ratio' bevares.

Jeg kan som i ovenstående eksempel vælge at indsætte en CSS-regel, som gælder ALLE hjemmesidens billede ved at knytte skaleringen til elementet 'img'. Eller jeg i stedet oprette skaleringen som en 'class', som kan tildeles billeder efter behov.

Her et eksempel, hvor 'img_width' udfylder det omgivende element 100% i bredden::

HTML
<img src="images/meeting.jpg" class="img_width" /> 
CSS
.img_width {
	width: 100%; /* SKALERER BILLEDE */
	height: auto; /* FASTHOLDER ASPECT RATIO - KAN UDELADES */
}

Ved hjælp af koden ovenfor, kan billedet nu tilpasse sig en hvilken som helst skærmstørrelse. Se resultatet i demo'en herunder - bemærk at denne demo kun fungerer på enheder tilsluttet en mus:

skalering af billede - træk i højre side
se eksempel på skalering af billeder hvor aspect ratio bevares

Skalering i højden

En sjælden gang kan jeg komme ud for, at det på grund af sidens layout er nødvendigt at skalere et billede med udgangspunkt i højden frem for i bredden - i det tilfælde bytter jeg bare om på værdierne i 'width' og 'height':

HTML
<img src="images/meeting.jpg" class="img_height" />
CSS
.img_height {
	width: auto;
	height: 100%; 
}

IV. Billeder i et responsivt layout

Grunden til, at det er mest almindeligt at skalere billeder med udgangspunkt i bredden er, at de skal ændre størrelse afhængigt af skærmstørrelsen på enheden der åbner hjemmesiden - dette er også en del af begrebet 'responsivt layout'.

I et responsivt layout er det imidlertid det omgivende element der er afgørende for, om billedet kan skalere eller ej - er bredden af det omgivende element fastsat med en statisk og fast værdi som pixel, vil det omgivende element ikke give billedet mulighed for at ændre størrelse.

Derfor vil det omgivende element, som udover billedet kan indeholde sidens øvrige indhold som for eksempel tekstafsnit, i et responsivt layout normalt være angivet med en dynamisk værdi som for eksempel procent - nøjagtig ligesom billedet.

Her et eksempel hvor sidens indhold er indsat i elementet 'main' - 'main' har en minimumsbredde på 320px svarende til den mindst mulige skrærmstørrelse, og en maksimal bredde på 630px bred, da tekstlinier med en bredde udover dette er mindre læsevenlige - se artiklen Bestem bredde af tekstlinier:

HTML
<main>

    	<div class="text_box">   
    		<p>"..iusto odio dignissimos ducimus qui blanditiis praesentium.."</p>       
   	</div> 
    
             	<img src="images/meeting.jpg" class="img_width" />
                     
    	<div class="text_box">   
    		<p>"..iusto odio dignissimos ducimus qui blanditiis praesentium.."</p>       
   	</div> 
                    
</main>                                                      
CSS
main  {
    width: 100%;
    min-width: 320px;   /* ALTID MINDST 320px BRED */
    max-width: 630px; /* ALDRIG BREDERE END 630px */
    height: 90%;
    margin: 0 auto;
    border: 2px solid black;
}
.text_box  { 
    padding: 4px;
    background: grey;
}
.text_box p  { 
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #BBB;
}
.img_width {
    width: 100%;
}

Se en demo her, hvor billedet skaleres og bevarer 'aspect ratio', når man ændrer browservinduets størrelse:

billedskalering i et responsivt layout
DEMO