Chromium, Safari Teknoloji Önizlemesi ve Firefox Gecelik'te yeni en boy oranına sahip CSS özelliği desteklenir

Duyarlı düzenlerde boşluğun korunmasına yardımcı olan yeni CSS özelliği.

Una Kravets

En boy oranı

En boy oranı, genellikle iki tam sayı ve bir 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'dir. Video ve daha yeni tüketici kameralarında ise genelde 16:9 en boy oranı kullanılır.

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

En boy oranını korumanın önemli olduğu noktalara ilişkin bazı örnekler:

• %100 üst öğe genişliğine sahip duyarlı iframe'ler oluşturma ve yüksekliğin belirli bir görüntü alanı oranı olarak kalması gerekir
• Öğeler yüklenip yer kapladığında yeniden düzenlemenin önlenmesi amacıyla resimler, videolar ve yerleştirmeler için içsel yer tutucu kapsayıcılar oluşturma
• Etkileşimli veri görselleştirmeleri veya SVG animasyonları için tek tip, duyarlı alan oluşturma
• Kartlar veya takvim tarihleri gibi çok öğeli bileşenler için tek tip, duyarlı alan oluşturma
• Farklı boyutlarda birden fazla resim için tek tip, duyarlı alan oluşturma (object-fit ile birlikte kullanılabilir)

Nesne sığdırma

En boy oranının tanımlanması, medyayı duyarlı bir bağlamda boyutlandırmamıza yardımcı olur. Bu paketteki diğer bir araç da object-fit özelliğidir. Bu özellik, kullanıcıların blok içindeki bir nesnenin (resim gibi) bu bloğu nasıl doldurması gerektiğini açıklamalarına olanak tanır:

initial ve fill değerleri, resmi alanı dolduracak şekilde yeniden ayarlar. Örneğimizde bu, piksellerin yeniden ayarlanması sırasında resmin dar ve bulanık olmasına neden olur. İdeal değildir. object-fit: cover, alanı doldurmak için resmin en küçük boyutunu kullanır ve resmi bu boyuta göre sığacak şekilde kırpar. En düşük sınırında "yakınlaştırır". object-fit: contain, tüm resmin her zaman görünür olmasını sağlar. Tam tersi olan cover, en büyük sınırın boyutunu (bunun üzerindeki örneğimizde genişliktir) alır ve alana sığdırırken gerçek en boy oranını korumak için resmi yeniden boyutlandırır. object-fit: none seçeneği, resmi orta kısmında kırpılmış (varsayılan nesne konumu) doğal boyutunda gösterir.

object-fit: cover, farklı boyutlardaki resimlerle çalışırken düzgün bir tek tip 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 (örneğin, düz bir bakım ürünü olan güzellik ürünleriyle çalışırken) önemli içeriğin kırpılması kabul edilmez. Bu nedenle ideal senaryo, kırpmadan kullanıcı arayüzü alanına sığan çeşitli boyutlarda duyarlı resimler olacaktır.

Eski çözüm: padding-top ile en boy oranını korumak

Bunları daha duyarlı hale getirmek için en boy oranını kullanabiliriz. Bu, belirli bir oran boyutu ayarlamamıza ve medyanın geri kalanını ayrı bir eksene (yükseklik veya genişlik) dayandırmamıza olanak tanır.

Bir resmin genişliğine göre en boy oranını korumak için şu anda iyi kabul edilen tarayıcılar arası bir çözüm, "Dolgu-Üstü Hack" olarak bilinir. Bu çözüm, bir üst kapsayıcı ve kesinlikle yerleştirilmiş bir alt kapsayıcı gerektirir. Ardından, en boy oranı padding-top olarak ayarlanacak bir 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 artık bunu üst kapsayıcımıza uygulayabiliriz. Aşağıdaki örneği inceleyin:

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

Bu durumda 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ı korunuyor

Maalesef bu padding-top değerlerinin hesaplanması çok kolay değildir ve bazı ek yük ve konumlandırma gerektirir. Yeni yerleşik aspect-ratio CSS özelliği sayesinde, en boy oranlarını korumak için kullanılacak dil çok daha nettir.

Aynı işaretleme ile padding-top: 56.25% değerini aspect-ratio: 16 / 9 ile değiştirebilir ve aspect-ratio değerini belirtilen width / height oranına ayarlayabiliriz.

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

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

padding-top yerine aspect-ratio kullanımı çok daha anlaşılırdır ve dolgu özelliğini normal kapsamı dışında bir şey yapmak üzere elden geçirmez.

Bu yeni özellik, en boy oranını auto olarak ayarlama özelliğini de ekler. Burada "doğal en boy oranına sahip olan değiştirilmiş öğeler bu en boy oranını kullanır. Aksi takdirde kutunun tercih edilen bir en boy oranı yoktur." Hem auto hem de <ratio> birlikte belirtilirse belirtilen en boy oranı, width değerinin height'ye bölünmesiyle elde edilir. Yerleşik en boy oranına sahip değiştirilmiş bir öğe olmadığı sürece bu durumda en boy oranı kullanılır.

Örnek: bir tabloda tutarlılık

Bu yöntem, CSS Grid ve Flexbox gibi CSS düzen mekanizmalarında da gerçekten işe yarar. 1:1 en boy oranını korumak istediğiniz, sponsor simgelerinden oluşan bir tablo gibi çocukların yer aldığı 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;
}

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

aspect-ratio özelliğinin bir başka harika özelliği de Cumulative Layout Shift'i önlemek ve daha iyi Web Verileri sunmak için yer tutucu alanı oluşturabilmesidir. Bu ilk örnekte, Unsplash gibi bir API'den öğe yüklenmesi, medyanın yüklenmesi bittiğinde bir düzen değişikliği oluşturur.

Ö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;
}

Ekstra ipucu: En boy oranına yönelik resim özellikleri

Bir resmin en boy oranını ayarlamanın bir başka yolu da resim özelliklerini kullanmaktır. Resmin boyutlarını önceden biliyorsanız bu boyutları width ve height olarak ayarlamak en iyi uygulamadır.

Yukarıdaki örneğimizde, boyutların 800 piksele 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 bu piksel değerleri tam olarak olmasa da resmin uygun alanı kaplaması için resim özelliği değerlerini width: 100% stiliyle birlikte kullanarak oranı ayarlayabiliriz. Tümü birlikte şöyle görünür:

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

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

Sonuçta bu işlem, CSS aracılığıyla resim üzerinde aspect-ratio öğesinin ayarlanmasıyla aynı olur ve kümülatif düzen kayması önlenir (Codepen'deki demoya bakın).

Sonuç

Yeni aspect-ratio CSS mülkü ile birden çok modern tarayıcıda kullanıma sunmak, medya ve düzen kapsayıcılarınızda uygun en boy oranlarını korumak biraz daha basit hale gelir.

Unsplash üzerinden Amy Shamblen ve Lionel Gustave'in fotoğrafları.