Свойство aspect-ratio

Свойството aspect-ratio задава подравняването на елементите по напречната ос за flex блокове и по хоризонталната ос за гридове. Прилага се към родителския елемент.

Синтаксис

селектор {
	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,
което мащабира елементите