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.

CSS technikák - Previous

Kör, ellipszis

Next - CSS technikák

Kép úsztatása szövegben

Last modified 3yr ago

Export as PDF

Copy link