CSS aspect-ratio Özelliği

Tanım ve kullanım

aspect-ratio Özelliği, elementin genişliği ve yüksekliği arasındaki oranını tanımlamanıza izin verir.

Ayarlandıysa aspect-ratio ve width Özelliği, yükseklik, tanımlanan genişlik ve yükseklik oranına göre ayarlanır.

Bu özelliği daha iyi anlamak için aspect-ratio Özelliği daha iyi anlamak için, aşağıdaki gösterimi kontrol edin.

İpucu:Yanıtlayıcı düzenlerde kullanım aspect-ratio Özellik, element boyutları sık sık değişiyorken, genişlik ve yükseklik arasındaki oranı korumak istediğinizde kullanılır.

Örnek

Örnek 1

Elemente uzunluk ve yükseklik oranı ekleyin:

div {
  aspect-ratio: 3 / 2;
}

Kişisel olarak deneyin

Örnek 2

div elementlerinin boyutları değişirseaspect-ratio Bu özellik, div elementlerinin genişlik ve yükseklik oranını kontrol etmek için çok uyguntur. Örneğin, bir görsel kitaplıkta, div elementlerinin boyutlarının tüm cihazlara uyumlu olmasını istersiniz, ancak aynı zamanda görsellerin genişlik ve yükseklik oranını korumak istersiniz:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>yan cadde</div>
  <div>yolda çiçekler</div>
  <div>dağlar</div>
  <div>Cinque Terre</div>
</div>

Kişisel olarak deneyin

CSS dilbilgisi

aspect-ratio: number/number|initial|inherit;

Özellik değeri

Değer Açıklama
number İlk rakam, genişlik ve yükseklik oranındaki genişlik değerini belirtir.
number

İkinci rakam, genişlik ve yükseklik oranındaki yükseklik değerini belirtir.

Opsiyonel. Ayarlanmadıysa, yükseklik değeri varsayılan olarak 1 olarak ayarlanır.
initial Bu özelliği varsayılan değerine ayarlar. Aşağıdaki gibi bakın: initial.
inherit Bu özelliği ebeveyn elementinden devralır. Aşağıdaki gibi bakın: inherit.

Teknik ayrıntılar

Varsayılan değer: auto
Devralım: Hayır
Animasyon yapımı: Desteği var. Aşağıdaki gibi bakın:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.aspectRatio="16/9"

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
88 88 89 15 74

İlgili sayfalar

Kılavuz:CSS ağ düzeni modülü

Kaynakça:CSS Object-fit özelliği

Kaynakça:CSS Object-position özelliği