CSS Dersleri

CSS aspect-ratio tanımı

Fatih Hayrioğlu

16 Oca 2023 — 3 min read

CSS ile resim, video ve iframe yapılarını uyumlu web gereği genişlik/yükseklik oranına (aspect ratio) göre küçültmek veya büyültmek için farklı bir yöntem kullanıyorduk. Artık aspect-ratio tanımı ile alternatif çözüme gerek kalmadı. Ayrıca bu tanım ile Chrome ekibinin performans kriterlerinden Cumulative Layout Shift (CLS): sorununu da çözebiliyoruz.

Şimdi özelliğin bize kazandırdıklarına bir göz atalım.

Eski çözüm yolları

Uyumlu(responsive) web hayatımıza girdiğinden beri bazı sorunlarla karşılaşıyoruz. Bunlardan en önemlisi galiba kullandığımız resimlerin boyutlarının istediğimiz oranda küçülmesi olabilir. Bu sorunu aşmak için çeşitli yöntemlerimiz vardı.

Bunlardan birisi resimlere width: 100%; verip yüksekliğinide height: auto; tanımlayıp esnek bir resim el etmekti.

Ancak bu yöntem ardalan resimlerinde işe yaramıyordu.

Mavi kutunun sağ alt kısmındaki boyutlandırma ikonundan büyültüp küçülterek sonucu görebilirsiniz.

Bir diğer yöntem de yüzde padding-top değeri kullanımıdır.

1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

Yukarıdaki gibi bir hesaplama ile resimlerin belli bir boy/en oranıyla küçülmesini sağlayabiliyorduk.

aspect-ratio tanımı

Tabi sonra bu işi kökten çözen aspect-ratio özelliği çıktı ve bir satır CSS kodu ile çözüm oluşturdu.

Aynı örneği aspect-ratio ile yaparsak.

Bu tanımı sadece resim, video ve iframe'de değil normal bir etikete de uygulayabiliriz. Örneğin üç kolonlu bir içeriğin div'lerine uygulayabiliriz.

Tabi içerik eğer en/boy oranını bozacak şekilde uzunsa oran bozuluyor. Ancak normal şartlarda en/boy oranını koruyor.

aspect-ratio medya sorguları

aspect-ratio medya sorgularında da kullanılabiliyor.

@media (aspect-ratio: 1/1) {
  body {
    background: lightblue;
  }
}

gibi sadece o orana göre kod yazıldığı gibi min-aspect-ratiove max-aspect-ratio gibi daha geniş yelpazeye göre de medya sorgusu ekleyebiliyoruz.

performansa aspect-ratio'lu çözüm

Yazının başında da belirttiğimiz gibi aspect-ratio tanımı CLS çözümü olarakta kullanılabilmektedir. Aşağıda görüldüğü gibi resmin sonradan yüklenmesiyle layout zıplaması oluyor.