CSS aspect-ratio özelliği

Duyarlı düzenlerde aralığın korunması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ı önlemek için çok önemlidir. Artık Chromium 88, Firefox 87 ve Safari Technology Preview 118'de kullanıma sunulan yeni aspect-ratio özelliğiyle bu işlemi daha kolay bir şekilde yapabilirsiniz.

En boy oranı

Browser Support

• 88
• 88
• 89
• 15

Source

En boy oranı en yaygın olarak şu boyutlarda iki tam sayı ve iki nokta üst üste ile ifade edilir: genişlik:yükseklik veya x:y. Fotoğrafçılıkta en yaygın en-boy oranları 4:3 ve 3:2 iken video ve daha yeni tüketici kameralarında genellikle 16:9 en-boy oranı kullanılır.

Aynı en boy oranına sahip iki resim. Biri 634 x 951 piksel, diğeri ise 200 x 300 pikseldir. İkisinin de en boy oranı 2:3'tür.

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

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

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

Object-fit

En boy oranını tanımlamak, duyarlı bir bağlamda medyanın boyutlandırılmasına yardımcı olur. Bu gruptaki bir diğer araç da object-fit özelliğidir. Bu özellik, kullanıcıların bir bloktaki bir nesnenin (ör. resim) bu bloğu nasıl doldurması gerektiğini açıklamasına olanak tanır:

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

initial ve fill değerleri, resmi alanı dolduracak şekilde yeniden ayarlar. Örneğimizde bu durum, pikselleri yeniden ayarladığından resmin sıkışmasına ve bulanıklaşmasına neden oluyor. İdeal değil. object-fit: cover, alanı doldurmak için resmin en küçük boyutunu kullanır ve resmi bu boyuta göre kırpar. En düşük sınırında "yakınlaştırır". object-fit: contain, resmin tamamının 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 bu genişliktir) alan ve resmi, alana sığarken doğal en boy oranını koruyacak şekilde yeniden boyutlandıran cover'ın tam tersidir. object-fit: none durumu, resmi doğal boyutunda, ortasında kırpılmış olarak gösterir (varsayılan nesne konumu).

object-fit: cover, farklı boyutlardaki resimlerle çalışırken güzel ve tek tip 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 yer aldığı bir düz çekimle çalışırken) önemli içeriğin kırpılması kabul edilemez. Bu nedenle, ideal senaryo, kullanıcı arayüzü alanına kırpılmadan sığan, farklı boyutlarda duyarlı resimler kullanmaktır.

Eski yöntem: padding-top ile en boy oranını koruma

Banttaki gönderi önizleme resimlerinde 1:1 en boy oranı ayarlamak için padding-top simgesini kullanma.

Bunları daha duyarlı hale getirmek için en boy oranını kullanabiliriz. Bu sayede belirli bir oran boyutu ayarlayabilir ve medyanın geri kalanını tek bir eksene (yükseklik veya genişlik) göre düzenleyebiliriz.

Bir resmin genişliğine göre en boy oranını korumak için şu anda yaygın olarak kabul edilen tarayıcılar arası çözüm "Padding-Top Hack" olarak bilinir. Bu çözüm için bir üst kapsayıcı ve mutlak olarak yerleştirilmiş bir alt kapsayıcı gerekir. Ardından, en boy oranı padding-top olarak ayarlanacak şekilde 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 inceleyelim:

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

Daha sonra aşağıdaki 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ını koruma

Banttaki gönderi önizleme resimlerinde 1:1 en boy oranı ayarlamak için aspect-ratio simgesini kullanma.

Maalesef bu padding-top değerlerinin hesaplanması çok kolay değildir ve ek yük ile konumlandırma gerektirir. Yeni doğal aspect-ratio CSS özelliği ile en boy oranlarını koruma dili çok daha net.

Aynı işaretlemeyle padding-top: 56.25% yerine aspect-ratio: 16 / 9'yi koyabilir, aspect-ratio'yi width / height'nin belirtilen oranına ayarlayabiliriz.

padding-top özelliğini kullanma

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

En-boy oranını kullanma

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

padding-top yerine aspect-ratio kullanmak çok daha anlaşılırdır ve dolgu özelliğini normal kapsamının dışında bir işlem yapacak şekilde değiştirmez.

Bu yeni özellik, en boy oranını auto olarak ayarlama olanağı da sunar. Burada "içsel en boy oranına sahip değiştirilen öğeler bu en boy oranını kullanır; aksi takdirde kutunun tercih edilen bir en boy oranı yoktur." Hem auto hem de <ratio> birlikte belirtilmişse tercih edilen en-boy oranı, width'nin height'e bölünmesiyle elde edilen orandır. Ancak bu, doğal en-boy oranına sahip bir değiştirilmiş öğe değilse bu en-boy oranı yerine kullanılır.

Örnek: Izgarada tutarlılık

Bu yöntem, CSS Grid ve Flexbox gibi CSS düzen mekanizmalarıyla da çok iyi çalışır. Sponsor simgeleri ızgarası gibi 1:1 en boy oranını korumak istediğiniz alt öğeleri olan 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;
}

Çeşitli en boy oranı boyutlarında üst öğeleriyle birlikte bir ızgaradaki resimler. Codepen'deki demoya göz atın.

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

aspect-ratio'ın bir diğer harika özelliği de Cumulative Layout Shift'i önlemek ve daha iyi Web Vitals sunmak için yer tutucu alanı oluşturabilmesidir. Bu ilk örnekte, Unsplash gibi bir API'den öğe yüklemek, medya yüklenmesi tamamlandığında düzen kaymasına neden oluyor.

Yüklenen bir öğede en boy oranı ayarlanmadığında oluşan kümülatif düzen kayması videosu. Bu video, 3G ağı taklit edilerek kaydedilmiştir.

Diğer yandan, aspect-ratio kullanmak bu düzen kaymasını önlemek için bir yer tutucu oluşturur:

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

Yüklenen bir öğede belirli bir en boy oranına sahip video ayarlanır. Bu video, 3G ağı taklit edilerek kaydedilmiştir. Codepen'deki demoya göz atın.

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

Bir resmin en boy oranını ayarlamanın bir diğer yolu da resim özelliklerini kullanmaktır. Resmin boyutlarını önceden biliyorsanız bu boyutları en iyi uygulama olarak width ve height olarak ayarlayın.

Yukarıdaki örneğimizde boyutların 800 piksel x 600 piksel olduğunu bildiğimiz için resim işaretlemesi <img src="image.jpg" alt="..." width="800" height="600"> şeklinde görünür. Gönderilen resmin en boy oranı aynıysa ancak piksel değerleri tam olarak aynı değilse yine de resim özelliğinin değerlerini kullanarak oranı ayarlayabiliriz. Bu durumda, resmin uygun alanı kaplaması için width: 100% stiliyle birleştirme yaparız. Tüm bunlar bir araya getirildiğinde şöyle görünür:

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

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

Sonuç olarak, efekt, CSS aracılığıyla resimde aspect-ratio ayarını yapmakla aynıdır 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ği sayesinde, medya ve düzen kapsayıcılarınızda uygun en-boy oranlarını korumak biraz daha kolay hale geliyor.

Amy Shamblen ve Lionel Gustave tarafından Unsplash üzerinden alınan fotoğraflar.