CSS aspect-ratio egenskab

forrige side animation-timing-function
næste side baggrundfilter

Definition og brug

aspect-ratio Egenskaben giver dig mulighed for at definere forholdet mellem elementets bredde og højde.

Hvis aspect-ratio og width Egenskaben, højden vil justeres efter det definerede bredde-højdeforhold.

For bedre at forstå aspect-ratio Egenskaben, se demonstrationen.

Tip:Brug i responsiv layout aspect-ratio Egenskaben, når elementets størrelse ofte ændres, ønsker du at holde bredden og højden i forhold.

Eksempel

Eksempel 1

Tilføj bredde-højdeforhold til elementet:

div {
  aspect-ratio: 3 / 2;
}

Prøv det selv

Eksempel 2

Hvis størrelsen på div-elementet skal ændresaspect-ratio Egenskaben er meget egnet til at kontrollere bredde-højdeforholdet for div-elementer. For eksempel, i en billedgalleri, ønsker du, at div-elementernes størrelse er fleksibel for at tilpasse sig alle enheder, men samtidig holde billedets bredde-højdeforhold:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div> gade</div>
  <div> blomster ved gaden</div>
  <div> bjerge</div>
  <div>Cinque Terre</div>
</div>

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
number	Det første tal angiver breddeværdien i bredde-højdeforholdet.
number	Den anden tal angiver højdeværdien i bredde-højdeforholdet. Valgfri. Hvis ikke indstillet, er højdeværdien standard 1.
initial	Sæt denne egenskab til dens standardværdi. Se initial.
inherit	Arv denne egenskab fra forældrelementet. Se inherit.

Tekniske detaljer

Standardværdi:	auto
Arv:	Nej
Animation production:	Understøttet. Se venligst:Animation relaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.aspectRatio="16/9"