Aspect-ratio
aspect-ratio ile en-boy oranını öğrenirsin.
aspect-ratio nedir?
Bazen bir kutunun genişliği değiştikçe yüksekliğinin de belirli bir oranda kalmasını istersin. aspect-ratio özelliği bu işi yapar: genişlik/yükseklik oranını sabit tutar.
Örneğin aspect-ratio: 16 / 9 yazdığında, genişlik ne olursa olsun yükseklik ona göre hesaplanır. 400 piksel genişlikte bir kutu 225 piksel yüksek olur. Bu, video yer tutucuları ve görsel çerçeveler için idealdir.
İçsel oran
Bir kutuya aspect-ratio verdiğinde, ona içsel bir oran kazandırmış olursun. Genişlik değişse bile oran korunur; yükseklik otomatik hesaplanır.
Eğer kutu içinde bir görsel varsa ve width: 100% verilmişse, oran görselin boyutunu da etkiler. Sabit oranlı yer tutucular, akıcı görseller ve video çerçeveleri için bu yaklaşım standart hale gelmiştir.
Yüksekliği auto bırak
Bazen bir kutunun hem aspect-ratio hem de sabit bir yüksekliği vardır. Bu durumda tarayıcı, açık yüksekliği önceliklendirir; oran yalnızca genişlik değiştiğinde devreye girer.
Esnek oran istiyorsan, height: auto yazman yeterli. Bu, oranın iş başında olmasını sağlar. Sabit yükseklik verirsen oran yalnızca genişlik önceden belirlenmişse çalışır.
Uygulama Video yer tutucusuna oran ver
.video seçicisine aspect-ratio: 16 / 9 ve height: auto ver. Ayrıca background-color: black ekle. Böylece genişlik değişse de oran korunur.
Örnek çözümü göster
/* video yer tutucusuna oran ver */
.video {
aspect-ratio: 16 / 9;
height: auto;
background-color: black;
}Kendini test et
-
Hangisi 4 birim genişlik, 3 birim yükseklik oranı verir?
- aspect-ratio: 3 / 4
- aspect-ratio: 4 / 3
- aspect-ratio: 4-3
- aspect-ratio: ratio(4,3)
Cevabı göster
aspect-ratio: 4 / 3 — Doğru. 4 / 3 yazımı dört birim genişlik, üç birim yükseklik oranı verir.
-
16:9 oranını yaz
.video { aspect-ratio: ____; }Cevabı göster
.video { aspect-ratio: 16 / 9; }