Grootte van afbeeldingen

De width en height attributen in de <img> tag van HTML worden gebruikt om de breedte en hoogte van een afbeelding op een webpagina aan te geven.

• width: Dit attribuut bepaalt de breedte van de afbeelding in pixels. Als je bijvoorbeeld width="200" in de <img> tag plaatst, wordt de afbeelding 200 pixels breed weergegeven op de webpagina.

• height: Dit attribuut bepaalt de hoogte van de afbeelding in pixels. Als je height="150" instelt, wordt de afbeelding 150 pixels hoog getoond op de webpagina.

Behoud de breedte- en hoogteverhouding van afbeeldingen

Om de grootte van een afbeelding aan te passen in HTML en tegelijkertijd de verhoudingen te behouden, wijzig je één van deze attributen: width of height (dus niet beide). Op die manier past de afbeelding zich proportioneel aan om de verhoudingen te behouden.

Het originele UGent logo zonder de breedte of hoogte aan te passen.

<img src="media/ugent_logo.png" alt="UGent logo origineel">

UGent logo waarbij de hoogte ingesteld is op 100 pixels en de breedte op 100 pixels. Merk op dat het lijkt alsof de afbeelding is samengeduwd.

<img src="media/ugent_logo.png" alt="UGent logo: 100 pixels breed, 100 pixels hoog" height="100" width="100">

UGent logo waarbij de breedte is ingesteld op 100 pixels. De hoogte wordt niet manueel ingesteld. Merk op de afbeeldingsverhouding hier wel correct is.

<img src="media/ugent_logo.png" alt="UGent logo: 100 pixels breed en de hoogte wordt volgens de afbeeldingsverhouding aangepast." width="100">

CSS is meer geschikt voor opmaak

Eigenlijk is het beter om met CSS de grootte van een afbeelding aan te passen, maar dat komt pas later aan bod.

Samenvatting

Attribuut	Afkomst	Betekenis
width	width	Breedte van de afbeelding
height	height	Hoogte van de afbeelding