Svojstvo aspect-ratio

Svojstvo aspect-ratio zadaje poravnanje elemenata duž poprečne ose za flex blokove i po horizontalnoj osi za gridove. Primenjuje se na roditeljski element.

Sintaksa

selektor {
	aspect-ratio: auto ili odnos;
}

Vrednosti

Vrednost	Opis
`auto`	Element nema preferirani odnos stranica i pregledač ga postavlja automatski, polazeći od širine i visine elementa.
`odnos`	Odnos se zapisuje u obliku `16/9`, ovde prvi broj je širina, a drugi broj - visina. Ako neka vrednost nije navedena, onda se smatra jednakom `1`. Takođe neki odnosi su dozvoljeni za pisanje jednim brojem. Na primer, `2/1` može se napisati kao `0.5`, to će dati isti rezultat.
`auto && odnos`	Ako odnos stranica ide zajedno sa ključnom rečju `auto` (primer: `auto` `1/2`), onda će se birati navedeni odnos, ali za zamenjive elemente (kao što su slike i video) sa sopstvenim odnosom biće korišćen samo on.

Primer

Hajde da postavimo za dugme automatski odnos stranica:

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

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

Primer

A sada hajde da zadamo odnos stranica za dugme kao 1/2:

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

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

Pogledajte takođe

svojstvo object-fit,
koje skalira elemente