Својството aspect-ratio

Својството aspect-ratio го поставува усогласувањето на елементите долж попречната оска за flex блокови и по хоризонталната оска за grid-ови. Се применува на родителскиот елемент.

Синтакса

селектор {
	aspect-ratio: auto или сооднос;
}

Вредности

Вредност	Опис
`auto`	Елементот нема претпочитан сооднос на страни и прелистувачот го поставува автоматски, врз основа на ширината и висината на елементот.
`сооднос`	Соодносот се запишува како `16/9`, овде првиот број е ширина, а вториот број е висина. Ако некоја вредност не е наведена, тогаш се смета дека е еднаква на `1`. Исто така некои соодноси е дозволено да се запишуваат со еден број. На пример, `2/1` може да се запише како `0.5`, ова ќе даде ист резултат.
`auto && сооднос`	Ако соодносот на страни оди заедно со клучното збор `auto` (пример: `auto` `1/2`), тогаш ќе се избере наведениот сооднос, но за заменливи елементи (како слики и видеа) со сопствен сооднос ќе се користи само тој.

Пример

Ајде да поставиме автоматски сооднос на страни за копчето:

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

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

Пример

А сега ајде да поставиме сооднос на страни за копчето како 1/2:

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

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

Погледнете исто така

својството object-fit,
кое скалира елементи