Webfejlesztőként gyakran találja magát azzal a dilemmával, hogy olyan HTML-elemekkel dolgozzon, amelyeknek – például az img elemmel ellentétben – nincs sem rögzített mérete, sem fix képaránya. Gyakran azt szeretné elérni, hogy ezek az objektumok érzékenyen viselkedjenek, de a szélesség és magasság aránya megmarad. Alapértelmezés szerint a CSS itt nem kínál intuitív megoldást. De a függőleges padding tulajdonság segítségével elérheti célját.
Vegyük a négyzet alakú termékképek mindennapi példáját. Bár maguk a grafikák nem feltétlenül négyzet alakúak, szeretnénk őket 1:1 képarányban megjeleníteni mindenféle extra erőfeszítés vagy torzítás nélkül, és a szélességüknek (és így a magasságuknak) reszponzívan kell változnia. A következő kód megkönnyíti ennek elérését CSS használatával további jelölés nélkül.:
1bc3a80de3db90cdf0535541236d95f2
az eredménnyel:
De miért működik ez, és hogyan lehet más képarányokat létrehozni? Ennek kulcsa a padding tulajdonságban rejlik, amely - százalékos értékekben megadva - mindig ugyanazon az alapértéken alapul, mint a Width tulajdonság (nevezetesen a szülőelem szélessége). Ez nyilvánvaló a bal oldali és a jobb oldali párnázásnál, meglepő a felső és az alsó párnázásnál, de ebben az esetben nagyon hasznos.
Ha például 16: 9 képarányt szeretne, akkor válassza a szélesség: 100%; padding-bottom: 56.25%; értékeket. Az aranyarányt figyelembe vevő képarány a szélesség: 100%, a párnázás alsó része: 61,81%; megvalósítható.
A calc segítségével közvetlenül megadhatja a képarányt, például 16: 9 esetén: padding-bottom: calc (1 / (16/9) * 100%). Ha az elem további, egymásba ágyazott elemekből áll, akkor a gyermek elem abszolút helyzetben van, hogy kompenzálja a szülő elem párnázatát:
1bc3a80de3db90cdf0535541236d95f2
Ez a következő eredményhez vezet: