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.
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).
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:
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:
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.
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.
Ayarlayarak align-items: start ızgara kapsayıcısında, daha büyük öğenin kardeşlerinde bu büyüyen davranışı önleyebiliriz.
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.
