En boy oranı - CSS Hileleri

CSS özelliği , bir kutunun ve kutusunun oran olarak otomatik olarak hesaplandığı aspect-ratioorantılı boyutları koruyan kutular oluşturmanıza olanak sağlar . Biraz matematiksel, ancak fikir şu ki, bu özellik üzerinde bir değeri diğerine bölebilirsiniz ve hesaplanan değer bir kutunun bu oranda kalmasını sağlar.heightwidth

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioşu anda Çalışma Taslağında bulunan CSS Kutu Boyutlandırma Modülü Seviye 4 spesifikasyonunda tanımlanmıştır. Bu, hala devam ettiği ve değişme şansı olduğu anlamına gelir. Ancak, Chrome ve Firefox deneysel bir bayrak arkasında desteklediğinden ve Safari Teknoloji Önizlemesi, 2021'in başlarında buna destek eklediğinden, aspect-ratioçok fazla ivme kazanan güçlü sinyaller var .

Sözdizimi

aspect-ratio: auto || ;

Düz İngilizce'de: aspect-ratioya varsayılan olarak autovarsayılır ya da nerede bir değer olarak kabul edilir .

• Başlangıç ​​değeri: auto
• Şunlar için geçerlidir: satır içi kutular ve dahili ruby ​​veya tablo kutuları dışındaki tüm öğeler
• Devralındı: hayır
• Yüzdeler: n / a
• Hesaplanan değer: belirtilen anahtar kelime veya bir sayı çifti
• Animasyon türü: ayrık

Değerler

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Değiştirilen ve değiştirilmeyen içerik üzerinde çalışır

"Uhm, evet, tarayıcı bunu bizim için resimlerde zaten yapmıyor mu?" cevap: kesinlikle . Tarayıcılar, görüntüler gibi değiştirilen içerik üzerinde bazı süslü en boy oranı hesaplamaları yapar . Dolayısıyla, bir görüntünün genişliği 500px ise, tarayıcı görüntünün içsel veya "doğal" boyutlarını korumak için CSS mizanpaj algoritmalarını esnetir. aspect-ratioÖzelliği, etkin şekilde doğal boyutları geçersiz kılmak için kullanılabilir.

Ancak değiştirilmeyen içeriğin doğal bir oranı yoktur. Bu, divs gibi çalıştığımız şeylerin çoğu. Öğenin doğal oranlarını korumaya çalışmak yerine, aspect-ratio"tercih edilen" bir boyutlandırma ayarlar.

Şimdi, spesifikasyon şu anda eski CSS spesifikasyonlarının, özellikle CSS 2.1'in değiştirilen ve değiştirilmeyen içerik arasında net bir ayrım içermediğini belirtiyor. Bu, açıklamaya yardımcı olmak için spesifikasyona eklenen bazı ek özel durumları görebileceğimiz anlamına gelir. Şimdilik, tarayıcıların değiştirilen ve değiştirilmeyenlerde tercih edilen en boy oranlarını ayrı ayrı ayarlamak için destek sunduğunu görüyoruz; burada, deneysel bir bayrağın arkasında erken desteği olan bazı tarayıcılar yalnızca aspect-ratiodeğiştirilmemiş içeriği destekleyebilir. Kesinlikle, geliştikçe tarayıcı desteğine göz atmaya değer.

Bir widthveya belirtmeden kendi başına çalışırheight

Yani, evet, bunu şöyle bir öğenin üzerine bırakabiliriz:

.element ( aspect-ratio: 16 / 9; )

… Ve öğenin varsayılanı width: auto, öğenin boyutlarını ayarlamak için örtük olarak devreye girer.

Aynı öğede olduğunda widthveya olduğunda değişirheight

Diyelim ki genişliği 300pxve bir aspect-ratioolan bir elemanımız var 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Doğası gereği, aspect-ratioöğenin boyutlarını kendi başına hesaplamak ister ve bunu, kullanıldığı bağlama göre yapar. Ancak bununla birlikte, widthen boy oranına 300px, genişlik olarak kullanarak öğenin en boy oranı kutusunu hesaplamasını söyler . Sonuç olarak, az önce yazdığımız gibi:

.element ( height: 100px; width: 300px; )

Bu mantıklı! Unutmayın, belirtilmediğinde widthveya heightbelirtildiğinde, tarayıcı bunların olduğunu varsayar autove oradan devam eder. Açık widthve heightdeğerler verdiğimizde , bunlar kullanılır.

Bazı durumlarda göz ardı edilir

Bu, işlerin biraz akıl almaz hale geldiği yerdir çünkü aspect-ratiogözden kaçan veya hesaplamalarının diğer özelliklerden etkilendiği durumlar vardır . Şunları içerir:

Ne zaman hem widthve heighteleman ilan edilir

Az önce widthveya heighton ve elementinin beyan edilmesinin hesaplamasını nasıl etkileyeceğini gördük aspect-ratio. Eleman zaten hem bir sahipse Ama widthve heightbu yerine alışması aspect-ratio. Her iki özelliğin de geçersiz kılınmasını gerektirir aspect-ratio; ya heightda widthtek başına ayarlamak öğenin en boy oranını bozmaz.

Senes yapar, değil mi? Hesaplamada bu değerden birini kullanmak widthveya bu değeri kullanmaya heightzorlarsa, aspect-ratiomantıksal olarak her aspect-ratioiki değer de zaten sağlandığı ve ayarlandığı için her ikisinin de kullanılması tamamen geçersiz kılınacaktır.

İçerik orandan çıktığında

Basitçe ifade etmek gerekirse, en boy oranına sahip bir öğeniz varsa ve içerik, öğeyi genişletmeye zorlayacak kadar uzunsa, öğe genişleyecektir. Ve eğer eleman genişlerse, boyutları değişir ve dolayısıyla artık en boy oranı olmaz. Spesifikasyonun mülkün "tercih edilen" en boy oranını ayarladığını söylemesinin nedeni budur. Tercih edilir, ancak reçete edilmemiştir.

Nasıl çalıştığını beğenmedin mi? min-height: 0;Öğeyi ayarlamak , içeriğin genişletmek yerine tercih edilen en boy oranını aşmasına izin verecektir.

min-*Ve max-*mülkleri "kaybettiğinde"

Bunun nasıl çalıştığını gördük, değil mi? İçerik, kutunun boyutlarını aştığında, aspect-ratiokutu içerikle birlikte genişlediği için etkili bir şekilde kaybolur. Bunu ile geçersiz kılabiliriz min-width: 0.

Yani en tümü çünkü min-*ve max-*özellikleri genellikle savaş widthve heightKutu Modeli hesaplamalar üzerinde savaş üstünlük için. Örneğin:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Fakat:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Bunun nedeni min-width, ya widthbelirli bir değerin altına inmeyi engellemesidir ya widthda öğeyi olması gereken minimum genişliğin ötesinde ayarladığı için göz ardı edilir . Aynı şey için de geçerli min-height, max-widthve max-height.

Tüm bu noktada: biz de a ayarlarsanız min-*veya max-*aynı elementin mülk aspect-ratiove onlar üzerinde “kazan” widthya height, sonra bu geçersiz kılar aspect-ratio. Biraz kafa karıştırıcı olduğunu söylemiştim. ?

Tarayıcı desteği

IE	Kenar	Firefox	Krom	Safari	Opera
Hayır	Hayır	86 1.2,3	90 4	TP 5	Hayır

Android Chrome	Android Firefox	Android Tarayıcı	iOS Safari	Opera Mobile
Hayır	Hayır	Hayır	Hayır	Hayır

Daha fazla bilgi

1 Tem 2020 tarihli makale

En boy oranına İlk Bakış

Sara Cope