Az aspect-ratio tulajdonság

A aspect-ratio tulajdonság beállítja az elemek igazítását a keresztirányú tengely mentén flex blokkoknál és a vízszintes tengely mentén a grid-eknél. A szülő elemre vonatkozik.

Szintaxis

cssszelektor {
  aspect-ratio: auto vagy arány;
}

Értékek

Érték	Leírás
`auto`	Az elemnek nincs előnyben részesített oldalaránya, és a böngésző automatikusan beállítja azt az elem szélessége és magassága alapján.
`arány`	Az arányt `16/9` formában írjuk le, itt az első szám a szélesség, a második szám pedig a magasság. Ha valamelyik érték nincs megadva, akkor `1`-nek tekintendő. Néhány arányt egyetlen számmal is meg lehet adni. Például a `2/1` megadható `0.5`-ként is, ez ugyanazt az eredményt adja.
`auto && arány`	Ha az oldalarány a `auto` kulcsszóval együtt jelenik meg (példa: `auto` `1/2`), akkor a megadott arányt választja ki, de a helyettesíthető elemeknél (mint például a képek és videók) saját oldalarányuk esetén csak azokat használja.

Példa

Állítsuk be a gomb automatikus oldalarányát:

html<p>
  <button>Click</button>
</p>

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

Результат:

Példa

Most pedig állítsuk be a gomb oldalarányát mint 1/2:

html<p>
  <button>Click</button>
</p>

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

Результат:

Lásd még

a object-fit tulajdonság,
amely méretezi az elemeket