Verhoudingen afbeelding passend maken met html en CSS

Soms hebben je afbeeldingen niet allemaal dezelfde verhouding en verspringen je afbeeldingen en foto’s als ze op een rij staan. Leer in deze handleiding hoe je de verhoudingen van de afbeelding toch passend kan maken met html en CSS.

Hoogte breedte afbeelding passend maken met html en CSS

Met de CSS eigenschap aspect-ratio kun je boxen maken met proportionele afmetingen, waarbij de hoogte en breedte van een box automatisch worden berekend als een verhouding. Het is een beetje wiskundig, maar het idee is dat je de ene waarde kunt delen door de andere op deze eigenschap en de berekende waarde zorgt ervoor dat een box in die verhouding blijft.

Met andere woorden, deze eigenschap helpt ons om elementen consistent te dimensioneren, zodat de verhouding van een element hetzelfde blijft als het groeit of krimpt.

.element {
aspect-ratio: 2 / 1; /* is het dubbele */
}

.element {
aspect-ratio: 1 / 1; /* een perfect vierkant */
}

Daarnaast is het handig om de vaste verhouding van je originele foto te behouden. Voeg dan dit toe aan je CSS:

  width: auto;
  height: auto;

Om de originele foto altijd passend te houden op elk scherm kun je bijvoorbeeld dit doen. 90vw (viewport) staat voor 90% van de schermbreedte.

img {
  display: block;
  max-width:90vw;
  max-height:90vh;
  width: auto;
  height: auto;
}

Verhoudingen afbeelding passend maken met html en CSS

Meer handleidingen over vw en viewport width vind je hier: