CSS aspect-ratio egenskap

Definition och användning

aspect-ratio Egenskapen låter dig definiera förhållandet mellan elementets bredd och höjd.

Om aspect-ratio och width Egenskapen, höjden kommer att justeras enligt definierat bredd-höjd-förhållande.

För att bättre förstå aspect-ratio Egenskapen, höjden kommer att justeras enligt definierat bredd-höjd-förhållande.

Tips:Använd i responsiv layout aspect-ratio Egenskapen är användbar när elementets storlek ofta ändras och du vill behålla förhållandet mellan bredd och höjd.

Exempel

Exempel 1

Lägg till bredd-höjd-förhållande för elementen:

div {
  aspect-ratio: 3 / 2;
}

Prova själv

Exempel 2

Om storleken på div-elementen behöver förändras,aspect-ratio Egenskaper är mycket bra för att kontrollera längd-bredd-förhållandet för div-element. Till exempel, i en bildgalleri vill du att storleken på div-elementen är flexibel för att anpassa sig till alla enheter, men samtidigt behålla bildens bredd-höjd-förhållande:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>gata</div>
  <div>blommor vid gatan</div>
  <div>berg</div>
  <div>Cinque Terre</div>
</div>

Prova själv

CSS-syntax

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

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Tal i tabellen representerar den första webbläsarens version som fullständigt stöder detta egenskap.

Relaterade sidor

Tutorial:CSS nätstruktur modul

Referens:CSS Object-fit egenskap

Referens:CSS Object-position egenskap