CSS aspect-ratio Özelliği
- Önceki sayfa hareket zamanlandırma fonksiyonu
- Sonraki sayfa arka plâflama filtresi
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; }
Ö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>
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
- Önceki sayfa hareket zamanlandırma fonksiyonu
- Sonraki sayfa arka plâflama filtresi