Webfejlesztőként gyakran zavarban van olyan HTML-elemekkel dolgozni, amelyek önmagukban - például az img-elemmel ellentétben - sem rögzített méretűek, sem rögzített képarányúak. Gyakran azt szeretné elérni, hogy ezek az objektumok reagálva viselkedjenek, de a szélesség és a magasság aránya megmarad. A CSS itt alapértelmezés szerint nem kínál intuitív megoldást. De a függőleges párnázási tulajdonság segítségével elérheti célját.
Vegyük a mindennapi példát a négyzet alakú cikkekre, amelyek grafikája nem feltétlenül négyzet alakú, de további erőfeszítések nélkül és mindenekelőtt torzítás nélkül szeretnénk megjeleníteni őket 1: 1 képaránnyal, ahol szélességük (és így magassága is) reagálva változik kellene. A következő kóddal ezt nagyon könnyű megtenni további jelölés nélkül a CSS segítségével:
1bc3a80de3db90cdf0535541236d95f2
az eredménnyel
De miért működik, és hogyan lehet más képarányokat létrehozni? Ennek kulcsa a kitöltési tulajdonságban rejlik, amely - százalékos értékekben megadva - mindig ugyanazon az alapértéken alapul, mint a Width tulajdonság (mégpedig a szülő elem szélessége). A bal és a jobb oldali párnázásnál ez nyilvánvaló, a felső és a párnázó alsó párna meglepő, 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: