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ını sağlayan yeni 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 açısından kritik öneme sahiptir. Chromium 88, Firefox 87 ve Safari Technology Preview 118'de kullanıma sunulan yeni aspect-ratio özelliği sayesinde artık bunu daha kolay bir şekilde yapabilirsiniz.

En boy oranı

Tarayıcı Desteği

• . 88
• . 88
• . 89
• . 15

Kaynak

En boy oranı, en yaygın şekilde aşağıdaki boyutlarda iki tam sayı ve iki nokta işaretiyle ifade edilir: genişlik:yükseklik veya x:y. Fotoğrafçılık için en yaygın en boy oranları 4:3 ve 3:2 iken video, ve daha yeni tüketici kameralarının en boy oranı genellikle 16:9'dur.

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

Duyarlı tasarımın gelişiyle birlikte en boy oranını korumak, reklamverenlerin (özellikle de resim boyutları farklı olduğundan ve öğe boyutları mevcut öğelere göre değiştiğinden) boşluk oluşturur.

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

• Üst öğe genişliğinin% 100'ü kadar olan ve yüksekliğin sabit olduğu duyarlı iframe'ler oluşturma belirli bir görüntü alanı oranı
• Resimler, videolar ve yerleştirmeler için doğal yer tutucu kapsayıcılar oluşturma öğeler yüklendiğinde ve yer kapladığında yeniden yerleşimini önlemek için
• 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ı boyutlardaki birden fazla resim için tek tip, duyarlı alan oluşturmak (ayrıca kullanılabilir, object-fit) olarak değiştirildi

Nesne sığdırma

En boy oranı tanımlamak, medyayı duyarlı bir bağlamda boyutlandırmamıza yardımcı olur. Bu projede kullanabileceğiniz paketi, kullanıcıların bir nesnenin (resim gibi) nasıl açıldığını açıklayabilmelerini sağlayan object-fit özelliğidir. arasındaki farklardan biri şudur:

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

initial ve fill değerleri, alanı dolduracak şekilde resmi yeniden ayarlar. Örneğimizde bu, pikselleri yeniden ayarladığı için resim sıkışık ve bulanık görünür. İdeal değildir. object-fit: cover kullanımları alanı kaplayacak şekilde resmin en küçük boyutunu belirler ve resmi buna sığacak şekilde kırpar boyutunu oluşturabilirsiniz. Yakınlaştırır en düşük sınırda. object-fit: contain, resmin tamamının her zaman görünür durumdadır ve en büyük sınırın boyutunu aldığı cover değerinin tam tersi (yukarıdaki örneğimizde bu "genişlik"tir) ve resmi en boy oranını korumak için resmi yeniden boyutlandırır. bir araya gelmek önemlidir. object-fit: none kılıfında, ortasında kırpılmış resim gösteriliyor. (varsayılan nesne konumu) ayarlayın.

object-fit: cover, çoğu durumda düzgün ve tek tip bir arayüz sağlamak için işe yarar. ancak bu şekilde bilgi kaybedersiniz (resim şu yönde kırpılır: .

Bu ayrıntılar önemliyse (örneğin, düz bir zemindeki güzellik ürünleri ile çalışırken) önemli içeriğin kırpılması kabul edilemez. İdeal senaryoda, bir reklamın kırpmadan kullanıcı arayüzüne sığan çeşitli boyutlarda.

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

Rulodaki yayın önizleme resimlerinin 1:1 en boy oranını ayarlamak için padding-top kullanılıyor.

Bunları daha duyarlı hale getirmek için en boy oranını kullanabiliriz. Bu, dönüşüm hunisinin ayrı bir eksene (yükseklik veya genişlik) dayalı olarak kalan medya öğeleri için belirli bir oranın boyutunu belirler.

Bir resmin boyutlarına dayalı olarak en boy oranını korumak için şu anda iyi kabul edilen tarayıcılar arası bir çözüm genişliği "Dolgu-Üst Hack" olarak bilinir. Bu çözüm için bir üst kapsayıcı ve bir alt kapsayıcı olmalıdır. Ardından, en boy oranı yüzde olarak hesaplanır ve padding-top olarak. Ö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

Bir rulodaki yayın önizleme resimlerinde 1:1 en boy oranını ayarlamak için aspect-ratio kullanılıyor.

Maalesef bu padding-top değerlerini hesaplamak kolay bir iş değildir ve ve konumlandırmaya yardımcı olursunuz. Yeni yerleşik aspect-ratio CSS ile özelliği, görünümün korunması için kullanılan dildir. oranlar çok daha nettir.

Aynı işaretlemeyle şunları değiştirebiliriz: padding-top: 56.25% yerine aspect-ratio: 16 / 9, ayar aspect-ratio - width / height oranı.

Dolgu üstünü kullanma

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

En boy oranı kullanılıyor

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

padding-top yerine aspect-ratio kullanılması çok daha anlaşılırdır ve dolguyu revizyona tabi tutmaz bir şey yapmasına izin vermiyor.

Bu yeni özellik, en boy oranını auto olarak ayarla, burada "doğal en boy oranına sahip değiştirilmiş öğeler bu en boy oranını kullanıyor oran; Aksi takdirde kutuda tercih edilen en boy oranı bulunmaz." Hem auto hem de <ratio> birlikte belirtildiği takdirde, tercih edilen en boy oranı, belirtilen width oranının height değerine bölünmesi, aksi takdirde değiştirilmiş bir öğedir. içsel bir en boy oranı (bu durumda en boy oranı kullanılır).

Örnek: çizelgede tutarlılık

Bu, CSS Grid ve Flexbox gibi CSS düzen mekanizmalarıyla da iyi sonuç verir. Bir listeyi değerlendirin 1:1 en boy oranını korumak istediğiniz çocuklar için (örneğin, sponsor simgelerinden oluşan bir tablo gibi) tıklayı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 öğeleriyle farklı en boy oranlarına sahip ızgaralar içindeki resimler. Codepen'deki demoyu inceleyin.

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

aspect-ratio ürününün bir başka harika özelliği de yer tutucu alan oluşturarak Cumulative Layout Shift ve daha iyi Web Verileri sunar. İlk sırada Örneğin, Unsplash gibi bir API'den bir öğe yüklendiğinde medyanın yüklenmesi bittiğinde düzen kayması.

Yüklenen bir öğede en boy oranı ayarlanmadığında gerçekleşen kümülatif düzen kaymasını gösteren video. Bu video, emüle edilmiş bir 3G ağı kullanılarak kaydediliyor.

Ö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 bir öğede, en boy oranı belirlenen video ayarlanmış. Bu video, emüle edilmiş bir 3G ağı kullanılarak kaydediliyor. Codepen'deki demoyu inceleyin.

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

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

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 resim aynı yöne sahipse tam olarak bu piksel değerleri olmadığından yine de oranı ayarlamak için özellik değerlerini width: 100% stiliyle birleştirerek doğru alanı kapladığından emin olun. Hepsi bir araya geldiğinde:

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

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

Sonuç olarak bu, aspect-ratio öğesini bir resim seçin ve kümülatif düzen kayması önlenir (demo için Codepen) içerir.

Sonuç

Birden çok modern tarayıcıda kullanıma sunulan aspect-ratio CSS mülkü sayesinde, medya ve düzen kapsayıcılarınızdaki en boy oranları biraz daha anlaşılır hale gelir.

Amy Shamblen ve Lionel'in fotoğrafları Gustave'i keşfedin.