aspect-ratio xassəsi

aspect-ratio xassəsi flex bloklar üçün eninə ox boyunca və gridlər üçün üfiqi ox boyunca elementlərin düzləndirilməsini təyin edir. Ana elementə şamil edilir.

Sintaksis

selektor {
	aspect-ratio: auto ve ya nisbet;
}

Dəyərlər

Dəyər	İzah
`auto`	Elementin üstünlük verilən en uzunluq nisbəti yoxdur və brauzer onu avtomatik olaraq elementin eni və hündürlüyünə əsasən təyin edir.
`nisbet`	Nisbət `16/9` şəklində yazılır, burada birinci rəqəm en, ikinci rəqəm isə hündürlükdür. Əgər hansısa dəyər göstərilməyibsə, o zaman `1`-ə bərabər hesab olunur. Həmçinin bəzi nisbətləri bir rəqəmlə yazmaq mümkündür. Məsələn, `2/1` `0.5` kimi yazıla bilər, bu eyni nəticəni verəcək.
`auto && nisbet`	Əgər en uzunluq nisbəti `auto` açar sözü ilə birlikdə gəlirsə (misal: `auto` `1/2`), onda göstərilən nisbət seçiləcək, lakin öz nisbəti olan əvəz olunan elementlər üçün (məsələn, şəkillər və videolar) yalnız onun öz nisbətindən istifadə olunacaq.

Nümunə

Gəlin düymə üçün avtomatik en uzunluq nisbəti təyin edək:

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

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

Nümunə

İndi isə gəlin düymə üçün en uzunluq nisbətini 1/2 kimi təyin edək:

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

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

Həmçinin bax

object-fit xassəsi,
elementləri miqyaslayır