CSS aspect-ratio Eigenschap

Definitie en gebruik

aspect-ratio Eigenschap laat u toe om het verhoudingspercentage van de breedte en hoogte van het element te definiëren.

Als de aspect-ratio en breedte Eigenschap, de hoogte wordt aangepast volgens het gedefinieerde aspect ratio.

Om beter te begrijpen aspect-ratio Eigenschap, bekijk de demonstratie.

Tip:Gebruik in responsieve lay-out aspect-ratio Eigenschap, wanneer de grootte van het element vaak verandert, wilt u de verhouding tussen breedte en hoogte behouden.

Voorbeeld

Voorbeeld 1

Voeg het aspect ratio toe aan het element:

div {
  aspect-ratio: 3 / 2;
}

Probeer het zelf uit

Voorbeeld 2

Als de grootte van de div-elementen moet veranderen,aspect-ratio De eigenschap is zeer geschikt om het aspect ratio van div-elementen te controleren. Bijvoorbeeld, in een afbeeldingsgalerij, wilt u dat de grootte van de div-elementen flexibel is om aan alle apparaten aan te passen, maar wilt u tegelijkertijd het aspect ratio van de afbeeldingen behouden:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>gang</div>
  <div>bloemen langs de straat</div>
  <div>bergen</div>
  <div>Cinque Terre</div>
</div>

Probeer het zelf uit

CSS-syntaxis

aspect-ratio: number/number|initial|inherit;

Eigenschapswaarde

Technische details

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt.

gerelateerde pagina's

Handleiding:CSS grid lay-out module

Referentie:CSS Object-fit eigenschap

Referentie:CSS Object-position eigenschap