En Boy Oranı Harika

Faydalı Alternatif Metin Yazma

Belki sadece benim, ama çoğu zaman yeni CSS özelliklerini öğrenmenin, yalnızca tek bir özelliğin ne işe yaradığını öğrenmeyi içermediğini, daha çok bir özellik koleksiyonunu ve bunların birlikte nasıl çalıştığını kavramayı, hatta bir tüm şartname. Bu kesinlikle benden bir şikayet değil: mülkleri bir ekosistemin parçası olarak düşünmek mantıklı. Ama itiraf etmeliyim ki, yeni bir CSS özelliğinin tarayıcılara dik bir öğrenme eğrisine sahip olmayan bir şekilde girmesine bayılıyorum ve sadece İşler, telaşsız. bu aspect-ratio property oradaki tüm doğru noktalara çarpar, tek bir CSS satırıyla, açıkçası, daha önce biraz faff olan bir şeyi düzgünce çözer. Bir yıldan beri tarayıcılarda destekleniyor, ancak Safari nihayet Eylül 2021’de yetiştiği için, sonunda onu aplomb ile kullanma konusunda kendimizi güvende hissedebiliriz.

Hoşçakal, dolgu hilesi

Geçen zamanlarda, öğelerin bir en boy oranına uymasını sağlamak için oldukça çirkin bir CSS yazmamız gerekiyordu:

.aspect-box {
position: relative;
}

.aspect-box::before {
display: block;
content: '';
width: 100%;
padding-bottom: calc(100% / (var(--aspect-ratio, 3 / 2)));
}

.aspect-box > :first-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Buna “dolgu kesme” adını verme eğilimindeyiz çünkü, işte bu. Özel özellik, birden fazla orana ihtiyacımız olursa, tekrarı azaltmamıza yardımcı olur. İşte bir CSS Püf Noktalarından özetve bir burada demo.

Aklı başında hiç kimse tüm bunları yazmak istemez. oran dostum sizin için Sass parçacığını oluşturan kullanışlı bir araçtır.

pratik kullanımı aspect-ratio

CSS’yi kullanma aspect-ratio özellik çok daha basittir: Belirtin Genişlik ve yükseklik eğik çizgiyle ayrılmış en boy oranı değerleri veya tek bir ondalık değer belirtin. Bu iki en boy oranı değeri aynı sonucu verecektir:

.aspect-box {
aspect-ratio: 3 / 2;
}

.aspect-box {
aspect-ratio: 1.5;
}

Açıkça bir genişlik ayarlayabilirsiniz veya eleman üzerindeki yükseklik ve aspect-ratio hemen hemen beklediğiniz gibi çalışacak: Hangi boyut belirtilmemişse, en boy oranı tarafından otomatik olarak belirlenecektir. Her iki genişliği de ayarlarsanız ve yükseklik başka bir şeye auto, en boy oranı artık geçerli olmaz. Bu bir hata değil, kasıtlı ve faydalı bir davranış.

Kalemi Gör
en boy oranı
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Sığdırmak için genişlet

aspect-ratio hem içsel hem de dışsal boyuttadır. Bu, her ikisine de yanıt verecek kadar akıllı olduğu anlamına gelir. içerik ve bağlam. Bu üç kutunun her birinin en boy oranı şu şekildedir: 2 / 1 ve açık bir genişlik seti. Üçüncü kutudaki metin içeriği, kullanılabilir alandan daha uzundur, bu nedenle, en-boy oranını korumak yerine öğe, içeriğe sığdırmak için dikey olarak genişler.

Demoyu görün

Bunun yerine açık bir yükseklik ayarlarsak, öğe genişlemez, bunun yerine taşma alırız (ki bu CSS overflow Emlak seçersek).

Kısa metinli iki mavi kutu, ebeveynden taşan daha uzun metinli bir mor kutu
Demoyu görün

Nesne sığdırmalı en boy oranlı görüntüler

aspect-ratio ile birleştirildiğinde gerçekten parlıyor object-fit resimleri boyutlandırmak için Kullanmak object-fit: cover galeri tarzı küçük resimler için:

Kalemi Gör
En boy oranı resim galerisi
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Veya object-fit: contain bir logo ızgarası için:

Kalemi Gör
En boy oranı logo ızgarası
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

şunu belirtmekte fayda var object-fit “Sığdırmak” istediğimiz öğeye ayarlanacak açık bir genişlik ve yükseklik gerektirir. Bu nedenle, aşağıdaki işaretleme için (en boy oranı kutusunun içindeki bir görüntü öğesi):

<div class="aspect-box">
<img src="https://images.unsplash.com/photo..." alt="Robin on a log" />
</div>

Resmin en boy oranı kutusunu doldurmasını ve kaplamasını istiyorsak, aşağıdaki CSS’ye ihtiyacımız olacak:

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

Oldukça sık bir şeyler koymak istiyoruz içinde yukarıdaki gibi en boy oranı kutusu. Ancak, istersek, sarmalayıcıyı atlayabilir ve en-boy oranı tokat patlamasını görüntü öğesinin üzerine yerleştirebilir, her ikisi yerine onu kullanabiliriz. width veya height:

img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}

Bağlamda en boy oranı kutuları

Yukarıdaki demolar, düzen için ve beklendiği gibi mükemmel çalışan bir resim galerisi için Grid veya flexbox kullanır. Peki ya en boy oranı kutularımızın yalnızca metin içerdiği (veya belki de boş olduğu) bir ızgaramız varsa? Dikkat edilmesi gereken bir şey, bu esnek ve Izgara setidir. align-items: stretch varsayılan olarak. Bunun anlamı, en boy oranı kutusuna sığabilecekten daha uzun içeriğe sahip bir ızgara çocuğumuz varsa (ve bu kutular için yükseklik yerine açık bir genişlik belirlediğimizi varsayarsak, daha yaygın senaryo), o zaman diğer öğeler ızgara olacak en uzun öğenin yüksekliğine uyacak şekilde büyüyünen boy oranını göz ardı ederek:

Kısa metinli iki mavi kutu, daha uzun metinli bir mor kutu

Bu, tasarımımız için istenen bir davranış olabilir ve genellikle varsayılan olarak oldukça uygundur. Öte yandan, satırdaki bir öğe daha uzun olsa bile öğelerin en boy oranını korumasını istiyorsak, o zaman ayarlamamız gerekir. align-items ızgara veya esnek kapsayıcıdaki varsayılandan başka bir şeye:

Kısa metinli iki mavi kutu, daha uzun metinli bir mor kutu

Kalemi Gör
en boy oranı
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Minimum en boy oranı

Varsayılan davranışın oldukça kullanışlı olduğu yerlerden biri, örneğin bir harekete geçirici mesaj gibi, bir tarafta metin ve diğer tarafta bir görüntünün bulunduğu bir UI bileşenidir. Görüntüye bir en boy oranı ayarlarsak, metin sütunu en azından görüntünün yüksekliğine uyacak kadar uzun. Ancak metin daha uzunsa, resim metnin yüksekliğine uyacak şekilde büyüyecektir.

İkincisi daha uzun metin içeren iki harekete geçirici mesaj

Demoyu görün

düşünebiliriz aspect-ratio bu durumda gibi davranarak asgarisabit olmaktan ziyade.

tarayıcı desteği

tarayıcı desteği şimdi yaygın, ancak iyi olan şu ki, çoğu durumda, muhtemelen çok fazla geri dönüş sağlamanız gerekmiyor. Kullanıcılar içeriğinizi görmeye devam edecek, ancak istediğiniz en boy oranına tam olarak uyacak şekilde boyutlandırılmayacak. Bununla birlikte, nesneye sığdırmayı kullanan bir resim galerisi durumunda, özellikle uzun olan herhangi bir resim, satırdaki diğer küçük resimlerin büyümesine ve potansiyel olarak bazı tuhaf kırpmalara neden olur.

Resim Galerisi

Ayarlayarak align-items: start ızgara kapsayıcısında, daha büyük öğenin kardeşlerinde bu büyüyen davranışı önleyebiliriz.

Resim Galerisi

Daha eski tarayıcılar için bir geri dönüş sağlamanız gerekiyorsa, eski bir özellik sorgusu yeterli olacaktır:

.aspect-box {
/* Styles for browsers that don't support aspect-ratio */
}

@supports (aspect-ratio: 1 / 1) {
.aspect-box {
/* Styles for browsers that support aspect-ratio */
}
}

toparlamak

aspect-ratio CSS topluluğunda uzun zamandır beklenen bir ihtiyacı karşılayan mütevazı bir mülkün harika bir örneğidir. Kullanımı kolaydır ve herhangi bir ekstra CSS’ye ihtiyaç duymadan içeriğe saygı duyacak şekilde davranır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.