Eienskap aspect-ratio

Die eienskap aspect-ratio spesifiseer die belyning van elemente langs die dwarsskyf vir flex-blokke en op die horisontale as vir grids. Dit word op die ouerelement toegepas.

Sintaksis

cssselektor {
  aspect-ratio: auto of verhouding;
}

Waardes

Waarde	Beskrywing
`auto`	Die element het geen voorkeur-aspekverhouding nie en die blaaier stel dit outomaties vas, gebaseer op die breedte en hoogte van die element.
`verhouding`	Die verhouding word geskryf as `16/9`, hier is die eerste getal die breedte, en die tweede getal - die hoogte. As 'n waarde nie gespesifiseer is nie, word dit as gelyk aan `1` beskou. Sommige verhoudings kan ook met een getal geskryf word. Byvoorbeeld, `2/1` kan geskryf word as `0.5`, dit sal dieselfde resultaat lewer.
`auto && verhouding`	As die aspekverhouding saam met die sleutelwoord `auto` kom (voorbeeld: `auto` `1/2`), dan sal die gespesifiseerde verhouding gekies word, maar vir vervangbare elemente (soos beelde en video's) met hul eie aspekverhouding sal slegs dit gebruik word.

Voorbeeld

Kom ons stel 'n outomatiese aspekverhouding vir die knoppie:

html<p>
  <button>Klik</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Voorbeeld

Laat ons nou 'n aspekverhouding vir die knoppie spesifiseer as 1/2:

html<p>
  <button>Klik</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Sien ook

die eienskap object-fit,
wat elemente skaal