Właściwość aspect-ratio

Właściwość aspect-ratio ustawia wyrównanie elementów wzdłuż osi poprzecznej dla bloków flex i wzdłuż osi poziomej dla siatek grid. Stosuje się do elementu nadrzędnego.

Składnia

selektor {
	aspect-ratio: auto lub proporcja;
}

Wartości

Wartość	Opis
`auto`	Element nie ma preferowanych proporcji i przeglądarka ustawia je automatycznie, na podstawie szerokości i wysokości elementu.
`proporcja`	Proporcja jest zapisywana jako `16/9`, gdzie pierwsza liczba to szerokość, a druga liczba - wysokość. Jeśli jakaś wartość nie jest określona, jest uznawana za równą `1`. Również niektóre proporcje można zapisać jedną liczbą. Na przykład, `2/1` można zapisać jako `0.5`, da to ten sam wynik.
`auto && proporcja`	Jeśli proporcja jest podana razem ze słowem kluczowym `auto` (przykład: `auto` `1/2`), to zostanie wybrana określona proporcja, ale dla elementów zastępowanych (takich jak obrazy i filmy) z własnymi proporcjami zostaną użyte tylko one.

Przykład

Ustawmy dla przycisku automatyczne proporcje:

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

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

Przykład

A teraz ustawmy proporcje przycisku jako 1/2:

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

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

Zobacz też

właściwość object-fit,
która skaluje elementy