Bir web geliştiricisi olarak, kendinizi sıklıkla, örneğin img öğesinin aksine, ne sabit bir boyuta ne de sabit bir en boy oranına sahip olan HTML öğeleriyle çalışma ikileminde bulursunuz. Çoğu zaman bu nesnelerin duyarlı davranmasını sağlamak istersiniz ancak genişlik ve yükseklik arasındaki oran korunur. Varsayılan olarak CSS burada sezgisel bir çözüm sunmamaktadır. Ancak dikey dolgu özelliğinin yardımıyla hedefinize ulaşabilirsiniz.
Günlük hayattan bir örnek olarak kare ürün resimlerini ele alalım. Grafikler kendileri mutlaka kare olmasa da, ekstra bir çaba veya bozulma olmadan 1:1 en boy oranında görüntülenmelerini ve genişliklerinin (ve dolayısıyla yüksekliklerinin) duyarlı bir şekilde değişmesini istiyoruz. Aşağıdaki kod, herhangi bir ek işaretleme olmadan CSS kullanarak bunu kolayca başarmanızı sağlar.:
1bc3a80de3db90cdf0535541236d95f2
sonuçla beraber:
Peki bu neden işe yarıyor ve diğer en boy oranları nasıl oluşturulabilir? Bunun anahtarı, yüzde değerleriyle belirtilen ve her zaman Width özelliğiyle aynı temel değeri (yani ana öğenin genişliğini) temel alan padding özelliğinde yatmaktadır. Bu, sol dolgu ve sağ dolgu için açıktır, üst dolgu ve alt dolgu için şaşırtıcıdır, ancak bu durumda çok faydalıdır.
Örneğin, 16: 9 en boy oranını istiyorsanız, width: 100%; padding-bottom: 56.25%; değerlerini seçersiniz. Altın oranı hesaba katan bir en boy oranı genişlik:% 100; dolgu alt:% 61,81; gerçekleştirilebilir.
Calc yardımıyla en boy oranını doğrudan belirleyebilirsiniz, örneğin alt dolgu ile 16: 9 için: hesap (1 / (16/9) *% 100). Öğe başka iç içe öğelerden oluşuyorsa, alt öğe, ana öğenin dolgusunu telafi etmek için kesinlikle konumlandırılır.:
1bc3a80de3db90cdf0535541236d95f2
Bu, aşağıdaki sonuca götürür: