en boy oranı #
- Chrome 88, Desteklenir 88
- Firefox 89, Desteklenir 89
- Kenar 88, Desteklenen 88
- Safari 15, Desteklenir 15
En boy oranı en yaygın olarak iki tamsayı ve iki nokta üst üste olarak şu boyutlarda 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ı genellikle 16:9 en boy oranına sahiptir.
Duyarlı tasarımın ortaya çıkmasıyla birlikte, özellikle görüntü boyutları farklı olduğundan ve öğe boyutları kullanılabilir alana göre değiştiğinden, en boy oranını korumak web geliştiricileri için giderek daha önemli hale geldi.
En boy oranını korumanın önemli hale geldiği bazı örnekler:
- Ebeveyn genişliğinin %100’ü kadar olan ve yüksekliğin belirli bir görünüm oranı olarak kalması gereken duyarlı iframe’ler oluşturma
- Görüntüler için içsel yer tutucu kaplar oluşturma, videolarve öğeler yüklendiğinde ve yer kapladığında yeniden düzenlemeyi önlemek için ekler
- Etkileşimli veri görselleştirmeleri veya SVG animasyonları için tek tip, yanıt veren alan oluşturma
- Kartlar veya takvim tarihleri gibi çok öğeli bileşenler için tek tip, duyarlı alan oluşturma
- Farklı boyutlarda birden çok görüntü için tek tip, yanıt veren alan oluşturma (yanında kullanılabilir
object-fit)
nesne uyumu #
Bir en boy oranı tanımlamak, medyayı duyarlı bir bağlamda boyutlandırmamıza yardımcı olur. Bu gruptaki diğer bir araç da object-fit kullanıcıların bir blok içindeki bir nesnenin (resim gibi) bu bloğu nasıl doldurması gerektiğini tanımlamasına olanak tanıyan özellik:
object-fit değerler. Görmek Codepen’de demo.bu initial Ve fill değerler, görüntüyü boşluğu dolduracak şekilde yeniden ayarlar. Örneğimizde bu, pikselleri yeniden ayarlarken görüntünün ezilmesine ve bulanıklaşmasına neden olur. Uygun değil. object-fit: cover boşluğu doldurmak için görüntünün en küçük boyutunu kullanır ve görüntüyü bu boyuta göre içine sığacak şekilde kırpar. En alt sınırında “yakınlaştırır”. object-fit: contain görüntünün tamamının her zaman görünür olmasını sağlar ve bu nedenle cover, burada en büyük sınırın boyutunu alır (yukarıdaki örneğimizde bu genişliktir) ve boşluğa sığdırırken asıl en boy oranını korumak için görüntüyü yeniden boyutlandırır. bu object-fit: none durum, görüntüyü merkezinden (varsayılan nesne konumu) doğal boyutunda kırpılmış olarak gösterir.
object-fit: cover çoğu durumda değişen boyutlardaki görüntülerle uğraşırken güzel bir tekdüze arayüz sağlamak için çalışma eğilimindedir, ancak bu şekilde bilgi kaybedersiniz (görüntü en uzun kenarlarından kırpılır).
Bu ayrıntılar önemliyse (örneğin, düz güzellik ürünleriyle çalışırken), önemli içeriğin kırpılması kabul edilemez. Bu nedenle ideal senaryo, kullanıcı arabirimi alanına kırpma olmadan sığan, değişen boyutlarda duyarlı görüntüler olacaktır.
Eski hack: en boy oranını korumak padding-top #
padding-top bir döngü içindeki önizleme sonrası görüntülerde 1:1 en boy oranı ayarlamak için.Bunları daha duyarlı hale getirmek için en boy oranını kullanabiliriz. Bu, belirli bir oran boyutu belirlememize ve ortamın geri kalanını ayrı bir eksene (yükseklik veya genişlik) dayandırmamıza olanak tanır.
Bir görüntünün genişliğine bağlı olarak en boy oranını korumak için şu anda kabul gören bir tarayıcılar arası çözüm, “Padding-Top Hack” olarak bilinir. Bu çözüm, bir üst kapsayıcı ve kesinlikle yerleştirilmiş bir alt kapsayıcı gerektirir. Daha sonra, en boy oranı olarak ayarlanacak bir yüzde olarak hesaplanacaktır. padding-top. Ö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 ana kapsayıcımıza uygulayabiliriz. Aşağıdaki örneği göz önünde bulundurun:
div class="container">
img class="media" src="..." alt="...">
</div>
Daha sonra aşağıdaki CSS’yi yazabiliriz:
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}.media {
position: absolute;
top: 0;
}
ile en boy oranını korumak aspect-ratio #
aspect-ratio bir döngü içindeki önizleme sonrası görüntülerde 1:1 en boy oranı ayarlamak için.Ne yazık ki, bunları hesaplamak padding-top değerler çok sezgisel değildir ve bazı ek yük ve konumlandırma gerektirir. Yeni içsel ile aspect-ratio CSS özelliğien boy oranlarını korumak için kullanılan dil çok daha net.
Aynı işaretleme ile şunları değiştirebiliriz: padding-top: 56.25% ile aspect-ratio: 16 / 9ayar aspect-ratio belirli bir orana width / height.
Dolgu üstü kullanma
.container {
width: 100%;
padding-top: 56.25%;
}
En-boy oranını kullanma
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
kullanma aspect-ratio yerine padding-top çok daha açıktır ve normal kapsamının dışında bir şey yapmak için dolgu özelliğini elden geçirmez.
Bu yeni özellik aynı zamanda en boy oranını auto, burada “içsel bir en boy oranına sahip değiştirilen öğeler bu en boy oranını kullanır; aksi halde kutunun tercih edilen en boy oranı yoktur.” İkisi de olursa auto ve bir <ratio> birlikte belirtilirse, tercih edilen en boy oranı belirtilen orandır. width bölü height olmadığı sürece değiştirilen eleman içsel bir en boy oranıyla, bu durumda bunun yerine bu en boy oranı kullanılır.
Örnek: bir ızgarada tutarlılık #
Bu, CSS Grid ve Flexbox gibi CSS düzen mekanizmalarıyla da gerçekten iyi çalışır. Sponsor simgelerinden oluşan bir ızgara gibi, 1:1 en boy oranını korumak istediğiniz alt öğeleri içeren 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 #
Bir diğer harika özelliği aspect-ratio Kümülatif Düzen Kaymasını önlemek ve daha iyi Web Verileri sunmak için yer tutucu alan oluşturabilmesidir. Bu ilk örnekte, aşağıdaki gibi bir API’den bir varlık yükleniyor: Unsplash ortamın yüklenmesi bittiğinde bir düzen kayması oluşturur.
kullanma aspect-ratioÖte yandan, bu düzen kaymasını önlemek için bir yer tutucu oluşturur:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Bonus ipucu: en boy oranı için görüntü nitelikleri #
Bir görüntünün en boy oranını ayarlamanın başka bir yolu da resim öznitelikleri. Görüntünün boyutlarını önceden biliyorsanız, bu bir en iyi pratik bu boyutları ayarlamak için width Ve height.
Yukarıdaki örneğimizde, boyutların 800 piksele 600 piksel olduğunu bildiğimizde, resim işaretlemesi şöyle görünür: <img src=" alt="..." width="800" height="600">. Gönderilen görüntü aynı en boy oranına sahipse, ancak tam olarak bu piksel değerleri olması gerekmiyorsa, oranı ayarlamak için bir stille birleştirilmiş görüntü öznitelik değerlerini kullanmaya devam edebiliriz. width: 100% böylece görüntü uygun alanı kaplar. Hep birlikte şuna benzer:
<!-- Markup -->
img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Sonunda, etki ayarı ayarlamakla aynıdır. aspect-ratio görüntüde CSS aracılığıyla ve kümülatif düzen kaymasından kaçınılır (Codepen’deki demoya bakın).
Çözüm #
yeni ile aspect-ratio Birden çok modern tarayıcıda başlatılan, medya ve düzen kapsayıcılarınızda uygun en boy oranlarını koruyan CSS özelliği biraz daha basit hale gelir.
Fotoğraflar: Amy Shamblen Ve Lionel Gustave Unsplash aracılığıyla.