Bir web geliştiricisi olarak, genellikle kendi başlarına - örneğin img öğesinin aksine - sabit bir boyuta veya sabit bir en boy oranına sahip olmayan HTML öğeleriyle çalışmaktan utanırsınız. Genellikle bu nesnelerin duyarlı davranmasını sağlamak istersiniz, ancak genişlik ve yükseklik arasındaki oran korunur. CSS burada varsayılan olarak sezgisel bir çözüm sunmaz. Ancak dikey dolgu özelliği sayesinde hedefinize ulaşabilirsiniz.
Grafikleri mutlaka kare olmayan kare makale resimlerinin günlük örneğini ele alalım, ancak bunları ek çaba sarf etmeden ve her şeyden önce 1: 1 en boy oranıyla bozulma olmadan görüntülemek istiyoruz, böylece genişlikleri (ve dolayısıyla yükseklikleri de) duyarlı bir şekilde değişir. meli. Aşağıdaki kod ile bunu CSS yardımıyla ek işaretleme yapmadan yapmak çok kolaydır.:
1bc3a80de3db90cdf0535541236d95f2
sonuçla beraber
Ama neden işe yarıyor ve diğer en boy oranları nasıl oluşturulabilir? Bunun anahtarı - yüzde değerleri olarak verilen - her zaman Width özelliğiyle aynı temel değere (yani ana öğenin genişliğine) dayalı olan dolgu özelliğinde yatmaktadır. Sol ve sağda dolgu ile bu açıktır, üst ve alt dolgu şaşırtıcı şaşırtıcı, ancak bu durumda çok yararlı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: