Proprietatea aspect-ratio

Proprietatea aspect-ratio definește alinierea elementelor de-a lungul axei transversale pentru containerele flex și de-a lungul axei orizontale pentru grid-uri. Se aplică elementului părinte.

Sintaxă

selector {
	aspect-ratio: auto sau raport;
}

Valori

Valoare	Descriere
`auto`	Elementul nu are un raport de aspect preferat și browserul îl setează automat, pe baza lățimii și înălțimii elementului.
`raport`	Raportul este scris sub forma `16/9`, aici primul număr este lățimea, iar al doilea număr este înălțimea. Dacă o valoare nu este specificată, se consideră egală cu `1`. De asemenea, unele raporturi pot fi scrise cu un singur număr. De exemplu, `2/1` poate fi scris ca `0.5`, acest lucru va da același rezultat.
`auto && raport`	Dacă raportul de aspect este combinat cu cuvântul cheie `auto` (exemplu: `auto` `1/2`), atunci va fi ales raportul specificat, dar pentru elementele înlocuibile (cum ar fi imaginile și videoclipurile) cu propriul raport de aspect va fi folosit doar acesta.

Exemplu

Să setăm pentru buton un raport de aspect automat:

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

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

Exemplu

Acum să setăm raportul de aspect pentru buton ca 1/2:

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

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

Vezi și

proprietatea object-fit,
care scală elementele