A CSS alapesetben nem kínál fel lehetőséget arra, hogy oldal arányait rugalmasan, reszponzív módon tartó téglalapot, vagy négyzetet hozzunk létre. A szélesség meghatározására számos lehetőségünk van, ha rugalmas felületeket akarunk létrehozni, a százalékos szélesség megadás egy optimális lehetőség, de a magasságot nem lehet úgy százalékosan megadni, mint a szélességet.
Fix méretű négyzetet egyszerűen készíthetünk, ha a szélességét és magasságát pixelben adjuk meg:
.square{
width: 250px;
height: 250px;
}
Ez nem egy reszponzív megoldás, és ha megpróbáljuk százalékos értékkel helyettesíteni a szélességet, és a magasságot, az elem magassága 0 lesz.
.square{
width: 50%;
height: 50%;/* ez nem működik :( */
}
A magasság helyett használjuk a padding-bottom (alsó belső margó) tulajdonságot, az elem szélességével megegyező százalékos méretben.
.square{
width: 50%;
padding-bottom: 50%;
}
Ha átméretezzük a böngésző ablakát a négyzet megtartja az arányait, és a böngésző ablak szélességétől függően méreteződik át.
Elegánsabb megoldás, ha álelemet használunk, ebben az esetben egyenlő arányú oldalaknál 100% padding-bottom-ot kell megadni:
.square{
width: 50%;
}
.square:before{
content:'';
display: block;
padding-bottom: 100%;
}
Ha eltérő oldalarányt szeretnénk (téglalapot, nem négyzetet) módosítsuk a padding százalékos értékét az aránynak megfelelően.