Aránytartó téglalap, négyzet
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:
1
.square {
2
width: 250px;
3
height: 250px;
4
}
Copied!
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.
1
.square {
2
width: 50%;
3
height: 50%; /* ez nem működik :( */
4
}
Copied!
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.
1
.square {
2
width: 50%;
3
padding-bottom: 50%;
4
}
Copied!
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:
1
.square {
2
width: 50%;
3
}
4
5
.square:before {
6
content: '';
7
display: block;
8
padding-bottom: 100%;
9
}
Copied!
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.
Last modified 3yr ago
Export as PDF
Copy link