aspect-ratio Özelliği

aspect-ratio özelliği, esnek kutular (flex) için çapraz eksen boyunca ve ızgaralar (grid) için yatay eksen boyunca elemanların hizalanmasını belirler. Ebeveyn elemente uygulanır.

Sözdizimi

seçici {
	aspect-ratio: auto veya oran;
}

Değerler

Değer	Açıklama
`auto`	Elementin tercih edilen bir en-boy oranı yoktur ve tarayıcı bu oranı elementin genişlik ve yüksekliğine dayanarak otomatik olarak belirler.
`oran`	Oran `16/9` şeklinde yazılır, burada ilk sayı genişliği, ikinci sayı ise yüksekliği temsil eder. Eğer bir değer belirtilmezse, o değer `1` olarak kabul edilir. Ayrıca bazı oranların tek bir sayı ile yazılması da kabul edilir. Örneğin, `2/1` yerine `0.5` yazılabilir, bu aynı sonucu verecektir.
`auto && oran`	Eğer en-boy oranı `auto` anahtar kelimesi ile birlikte kullanılırsa (örnek: `auto` `1/2`), belirtilen oran kullanılacaktır, ancak kendi en-boy oranına sahip olan yer değiştirilebilir elementler (resim ve video gibi) için sadece kendi oranları kullanılır.

Örnek

Buton için otomatik en-boy oranı ayarlayalım:

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

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

Örnek

Şimdi ise buton için en-boy oranını 1/2 olarak belirleyelim:

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

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

Ayrıca Bakınız

elementleri ölçeklendiren object-fit özelliği