Duyarlı düzenlerde boşluğun korunmasına yardımcı olan yeni CSS özelliği.
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.
![Aynı en boy oranına sahip iki resim. Biri 634 x 951 piksel, diğeri 200 x 300 pikseldir. Her ikisinin de en boy oranı 2:3.](https://web.dev/static/articles/aspect-ratio/image/two-images-the-same-aspe-c70cc7ed740f8.jpg?authuser=5&hl=tr)
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:
![Nesne sığdırma demo görselleştirmesi](https://web.dev/static/articles/aspect-ratio/image/object-fit-demo-visualiza-6e1b75de8297c.jpg?authuser=5&hl=tr)
object-fit
değerlerini gösterme. Codepen'de demoyu inceleyin.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
![Bant içindeki önizleme sonrası resimlerde 1:1 en boy oranı ayarlamak için dolgu üst kısmını kullanma.](https://web.dev/static/articles/aspect-ratio/image/using-padding-top-set-1-9702b5487f14c.jpg?authuser=5&hl=tr)
padding-top
aracını kullanma.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
![Rulo içindeki önizleme sonrası resimlerde 1:1 en boy oranını ayarlamak için en boy oranını kullanma.](https://web.dev/static/articles/aspect-ratio/image/using-aspect-ratio-set-e58f152775151.jpg?authuser=5&hl=tr)
aspect-ratio
aracını kullanmaMaalesef 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ı.