CSS'de En Boy Oranı İçin Harika Bir Çözüm aspect-ratio

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 girmesi, hızlı bir öğrenme eğrisi olmayan ve sorunsuz bir şekilde çalışan tarayıcılara girmesine bayılıyorum. buaspect-ratiomülkiyet 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ıldır 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 CSS Tricks'ten bir özet ve burada bir demo .

Aklı başında hiç kimse tüm bunları yazmak istemez. Ratio Buddy , sizin için Sass snippet'ini oluşturan kullanışlı bir araçtır.

pratik kullanımıaspect-ratio

CSS aspect-ratioözelliğini kullanmak çok daha basittir: En boy oranı için genişlik ve yükseklik değerlerini eğik çizgiyle ayırarak belirtin 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;
}

Öğe üzerinde açıkça bir genişlik veya yükseklik ayarlayabilirsiniz ve aspect-ratiohemen hemen beklediğiniz gibi çalışır: Belirtilmemiş olan boyut, en boy oranı tarafından otomatik olarak belirlenir. Hem genişliği hem de yüksekliği dışında bir değere ayarlarsanız auto, en boy oranı artık geçerli olmaz. Bu bir hata değil, kasıtlı ve faydalı bir davranış.

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

aspect-ratiohem içsel hem de dışsal boyuttadır. Bu, hem içeriğe hem de bağlama yanıt verecek kadar akıllı olduğu anlamına gelir . Bu üç kutunun her birinin en boy oranı 2 / 1ve açık bir genişlik seti vardır. Üçü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, eleman genişlemez, bunun yerine taşarız ( eğer istersek CSS overflowözelliği ile halledebiliriz ).

Demoyu görün

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

aspect-ratioobject-fitgörüntüleri boyutlandırmak için birleştirildiğinde gerçekten parlar . object-fit: coverGaleri tarzı küçük resimler için kullanın :

Veya object-fit: containbir logo ızgarası için:

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

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

Çoğu zaman , yukarıdaki gibi en boy oranı kutusuna bir şeyler koymak isteriz. Ancak, istersek, ya da yerine kullanarak, sarmalayıcıyı atlayabilir ve en boy oranı tokat patlamasını görüntü öğesine widthkoyabiliriz 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, align-items: stretchvarsayılan olarak ayarlanan esnek ve Izgaradır. 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, en boy oranını göz ardı ederek en uzun öğenin yüksekliğine uyacak şekilde büyüyecektir :

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 oranlarını korumasını istiyorsak align-items, ızgara veya esnek kapsayıcıdaki varsayılandan farklı bir şeye ayarlamamız gerekir:

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ğiyle eşleşecek kadar uzun olacaktır. Ancak metin daha uzunsa, resim metnin yüksekliğine uyacak şekilde büyüyecektir.

Demoyu görün

Bu durumda sabit olmak yerine minimumaspect-ratio gibi davrandığını düşünebiliriz .

tarayıcı desteği

Tarayıcı desteği artık 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.

Izgara kabını ayarlayarak align-items: start, 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 */
  }
}

Özetle

aspect-ratioCSS 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.