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" />

Billedskalering i et responsivt layout

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::

Skalering i højden

skalering af billede - træk i højre side

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%;
}