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

cssseç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:

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

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

Результат:

Örnek

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

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

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

Результат:

Ayrıca Bakınız

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