Breedte van afbeelding in HTML

Standaard worden afbeeldingen weergegeven in hun werkelijke grootte. De afbeelding met de smiley die we hierboven hebben getoond, heeft bijvoorbeeld een werkelijke grootte van 130 bij 130 pixels, en diezelfde afbeeldingsgrootte zien we in de browser.

Indien gewenst kan de grootte van de afbeelding worden gewijzigd door een breedte in te stellen. Dit gebeurt met het attribuut width.

Laten we bijvoorbeeld voor onze afbeelding een breedte van 100 pixels instellen. Hiervoor geven we als waarde van het attribuut width het getal 100 op, zoals hier:

htmlwidth="100"

Welke grootte zal de afbeelding dan op het scherm hebben? Je zou kunnen denken: breedte 100 pixels, zoals we hebben ingesteld, en de werkelijke hoogte 130, omdat we die niet hebben ingesteld. In werkelijkheid is dit niet het geval.

De breedte zal inderdaad 100 pixels zijn, maar de hoogte past zich aan zodat de verhoudingen van de afbeelding niet worden vervormd, dus deze wordt ook 100 pixels.

Laten we het uitvoeren en hiervan overtuigen:

html<img src="smile.png" width="100">

Результат: