CSS aspect-ratio özelliği

Duyarlı düzenlerde boşluk bırakılmasına yardımcı olan CSS özelliği.

Una Kravets

Not: Özet: En boy oranı olarak adlandırılan tutarlı bir genişlik-yükseklik oranını korumak, duyarlı web tasarımında ve kümülatif düzen kaymasını önlemede çok önemlidir. Artık Chromium 88, Firefox 87 ve Safari Technology Preview 118'de kullanıma sunulan yeni aspect-ratio mülküyle bunu daha kolay bir şekilde yapabilirsiniz.

En boy oranı

Tarayıcı Desteği

• 88
• 88
• 89
• 15

Kaynak

En boy oranı genellikle iki tam sayı ve bir iki nokta işareti şeklinde ifade edilir. Bu boyutlar şu şekildedir: genişlik:yükseklik veya x:y. Fotoğraf için en yaygın en boy oranları 4:3 ve 3:2'dir. Video ve daha yeni tüketici kameraları ise genellikle 16:9 en boy oranına sahiptir.

Aynı en boy oranına sahip iki görüntü. Biri 634 x 951 piksel, diğeri ise 200 x 300 pikseldir. Her ikisinin de en boy oranı 2:3'tür.

Duyarlı tasarımın ortaya çıkmasıyla birlikte, özellikle resim boyutları farklılaştığı ve öğe boyutları mevcut alana göre değiştiği için web geliştiricileri için en boy oranını korumak giderek daha önemli hale geldi.

En boy oranını korumanın önemli olduğu bazı örnekler:

• Üst öğenin genişliğinin %100'ü olan ve yüksekliğin belirli bir görüntü alanı oranında kalması gereken duyarlı iFrame'ler oluşturma
• Öğeler yüklendiğinde ve yer kapladığında yeniden düzen oluşturmayı önlemek için resimler, videolar ve yerleşimler için doğal yer tutucu kapsayıcılar oluşturma
• Etkileşimli veri görselleştirmeleri veya SVG animasyonları için tek tip, duyarlı bir alan oluşturma
• Kartlar veya takvim tarihleri gibi çok öğeli bileşenler için tekdüze, duyarlı alan oluşturma
• Değişken boyutlarda birden fazla resim için tekdüze, duyarlı alan oluşturma (object-fit ile birlikte kullanılabilir)

object-fit

En boy oranı tanımlamak, medyayı duyarlı bir bağlamda boyutlandırmamıza yardımcı olur. Bu paketteki başka bir araç, kullanıcıların bir blok içindeki nesnenin (resim gibi) bir nesnenin bu bloğu nasıl dolduracağını açıklamasını sağlayan object-fit özelliğidir:

Çeşitli object-fit değerlerini gösterme. Codepen'deki demoya göz atın.

initial ve fill değerleri, resmi alanı dolduracak şekilde yeniden ayarlar. Örneğimizde, piksellerin yeniden ayarlanması nedeniyle resim sıkıştırılır ve bulanıklaşır. İdeal değil. object-fit: cover, alanı doldurmak için resmin en küçük boyutunu kullanır ve resmi bu boyuta sığacak şekilde kırpar. En düşük sınırına "yakınlaştırır". object-fit: contain, resmin her zaman görünür olmasını sağlar. Bu nedenle, en büyük sınırın boyutunu (yukarıdaki örneğimizde genişlik) alan ve alana sığarken doğal en boy oranını koruyacak şekilde resmi yeniden boyutlandıran cover'in tam tersidir. object-fit: none durumu, resmin ortasından kırpılmış (varsayılan nesne konumu) doğal boyutunda gösterilmesini sağlar.

object-fit: cover, farklı boyutlardaki resimlerle çalışırken güzel ve tekdüze bir arayüz sağlamak için çoğu durumda işe yarar ancak bu şekilde bilgi kaybedersiniz (resim en uzun kenarlarından kırpılır).

Bu ayrıntılar önemliyse (ör. güzellik ürünlerinin düz bir şekilde yerleştirildiği bir fotoğrafla çalışırken) önemli içeriğin kırpılması kabul edilmez. Bu nedenle ideal senaryo, kullanıcı arayüzü alanına kırpılmadan sığabilen, farklı boyutlarda duyarlı resimler kullanmaktır.

Eski saldırı: padding-top ile en boy oranını koruma

Bir banttaki önizleme sonrası resimlerde 1:1 en boy oranı ayarlamak için padding-top kullanma.

Bunları daha duyarlı hale getirmek için en boy oranını kullanabiliriz. Bu sayede belirli bir oran boyutu belirleyebilir ve medyanın geri kalanını tek bir eksene (yükseklik veya genişlik) dayandırabiliriz.

Bir resmin genişliğine göre en boy oranını korumak için şu anda yaygın olarak kullanılan tarayıcılar arası çözüm, "Padding-Top Hack" olarak bilinir. Bu çözüm için bir üst kapsayıcı ve kesinlikle yerleştirilmiş bir alt kapsayıcı gerekir. Daha sonra, padding-top olarak ayarlamak için en boy oranı yüzde olarak hesaplanır. Örneğin:

• 1:1 en boy oranı = 1 / 1 = 1 = padding-top: 100%
• 4:3 en boy oranı = 3 / 4 = 0,75 = padding-top: 75%
• 3:2 en boy oranı = 2 / 3 = 0,66666 = padding-top: 66.67%
• 16:9 en boy oranı = 9 / 16 = 0,5625 = padding-top: 56.25%

En boy oranı değerini belirlediğimize göre bunu üst kapsayıcımıza uygulayabiliriz. Aşağıdaki örneği inceleyin:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Daha sonra şu CSS'yi yazabiliriz:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

aspect-ratio ile en boy oranı korunuyor

Banttaki önizleme sonrası resimlerde 1:1 en boy oranı ayarlamak için aspect-ratio'i kullanma.

Maalesef bu padding-top değerlerini hesaplamak çok sezgisel değildir ve ek maliyet ve konumlandırma gerektirir. Yeni doğal aspect-ratio CSS mülkü sayesinde en boy oranlarını korumak için kullanılan dil çok daha net.

Aynı işaretlemeyle padding-top: 56.25%'ü aspect-ratio: 16 / 9 ile değiştirebilir, aspect-ratio'yi width / height oranında ayarlayabiliriz.

Dolgu üstünü kullanma

.container {
  width: 100%;
  padding-top: 56.25%;
}

aspect-ratio özelliğini kullanma

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top yerine aspect-ratio kullanmak çok daha nettir ve dolgu özelliğini normal kapsamının dışında bir şey yapmak için yeniden düzenlemez.

Bu yeni özellik, en boy oranını auto olarak ayarlama olanağı da ekler. Burada "yerine eklenen öğeler, doğal en boy oranına sahipse bu en boy oranını kullanır. Aksi takdirde kutunun tercih edilen en boy oranı olmaz." Hem auto hem de <ratio> birlikte belirtilirse tercih edilen en boy oranı, width'nin height'e bölünmesiyle elde edilen orandır. Bununla birlikte, doğal en boy oranına sahip bir yerine yerleştirilmiş öğe ise bunun yerine ilgili en boy oranı kullanılır.

Örnek: ızgaradaki tutarlılık

Bu, CSS Grid ve Flexbox gibi CSS düzen mekanizmalarıyla da iyi sonuç verir. Sponsor simgeleri ızgarası gibi 1:1 en boy oranını korumak istediğiniz alt yayıncılar içeren bir liste düşünün:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Üst öğeleri çeşitli en boy oranlarında olacak şekilde bir ızgarada yer alan görüntüler. Codepen'deki demoyu inceleyin.

Örnek: Düzen kaymasını önleme

aspect-ratio'ün bir diğer önemli özelliği de kümülatif düzen kaymasını önlemek ve daha iyi Web Vitals değerleri sunmak için yer tutucu alanı oluşturabilmesidir. Bu ilk örnekte, Unsplash gibi bir API'den öğe yüklendiğinde medya yüklendikten sonra bir düzen kayması oluşur.

Yüklenen bir öğede en boy oranı ayarlanmadığında gerçekleşen kümülatif düzen kaymasının videosu. Bu video, taklit edilmiş bir 3G ağı ile kaydedilmiştir.

Öte yandan aspect-ratio kullanıldığında bu düzen kaymasını önlemek için bir yer tutucu oluşturulur:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Yüklenen öğede, en boy oranı belirlenmiş bir video ayarlanır. Bu video, taklit edilmiş bir 3G ağı ile kaydedilmiştir. Codepen'deki demoyu inceleyin.

Ek ipucu: En boy oranı için resim özellikleri

Resmin en boy oranını ayarlamak için resim özelliklerini de kullanabilirsiniz. Resmin boyutlarını önceden biliyorsanız bu boyutları width ve height olarak ayarlamak en iyi uygulama olacaktır.

Yukarıdaki örneğimizde, boyutların 800 x 600 piksel olduğunu bildiğinizde resim işaretlemesi şöyle görünür: <img src="image.jpg" alt="..." width="800" height="600">. Gönderilen resmin en boy oranı aynıysa, ancak tam piksel değerleri tam olarak bu değilse, oranı ayarlamak için image özelliği değerlerini width: 100% stiliyle birlikte kullanarak resmin uygun alanı kaplamasını sağlayabiliriz. Tüm bunlar birlikte şöyle görünür:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Sonuçta, CSS aracılığıyla resimde aspect-ratio ayarlamakla aynı etki elde edilir ve kümülatif düzen kayması önlenir (Codepen'deki demoya bakın).

Sonuç

Birden fazla modern tarayıcıda kullanıma sunulan yeni aspect-ratio CSS özelliğiyle, medya ve düzen kapsayıcılarınızda doğru en boy oranlarını korumak biraz daha kolay hale geliyor.

Unsplash aracılığıyla Amy Shamblen ve Lionel Gustave'e ait fotoğraflar.