> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css-technikak/aranytarto-teglalap-negyzet.md).

# 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:

```css
.square {
    width: 250px;
    height: 250px;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVEGP57mbdVNvQFWkLY%2F-LVEGvlJTiBkjRF3JsXi%2Fsquare-px.png?alt=media\&token=e00aa8bf-96ea-4e50-bf28-15da8a47d969)

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.

```css
.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.

```css
.square {
    width: 50%;
    padding-bottom: 50%;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVEJNKATSLmq0lNK2cK%2F-LVEQdXn154H_zSgx-hd%2Fanim%20square.gif?alt=media\&token=85cef25a-8b14-44ba-87ea-2fc233f4215b)

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:

```css
.square {
	width: 50%;
}

.square:before {
	content: '';
	display: block;
	padding-bottom: 100%;
}
```

{% embed url="<https://codepen.io/_lacus/pen/jXYzGO>" %}

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.