Výška závislá na šířce

Při tvorbě webu, který má být responsivní, se můžeme dostat do situace, kdy je šířka neznámá (zadána v procentech) a výšku potřebujeme takovou, aby se v určitém poměru odvozovala od výšky.

Poznámka: Nastavování výšky (height) často značí špatný postup. V případě, že v elementu s natvrdo nastavenou výškou bude nějaký text, je prakticky nemožné zajistit, aby se při různých velikostech písma řádně vešel.

Řešení

Celý trik spočívá v tom, že procentuální hodnota vlastnosti padding se počítá z šířky rodiče. Stačí tedy:

1. výšku vynulovat (height: 0),
2. spodní padding nastavit na požadovaný procentuální podíl na šířce,
3. použít obsahový box model (box-sizing: content-box – výchozí), který sčítá okraje a právě padding připočítává do výsledných rozměrů (výška je ale nulová, takže ji celou zajistí právě padding).

.box {
  height: 0;
  padding-bottom: 25%;
}

Níže uvedený <div> má vždy čtvrtinovou výšku (25 %) oproti šířce, přesvědčte se změnou šířky jeho rodiče.

0 % 100 %

Pevná šířka v pixelech

Je-li potřeba, aby byla výška závislá na šířce, ale ta má být zadaná v pixelech, není to problém. Obal elementu, co má mít výšku podle šířky, zkrátka bude mít rozměry v px. Ukázka.

Proč spodní padding?

Natáhnout výšku je možné i horním paddingem nebo kombinací (padding-top + padding-bottom). V případě samostatného padding-top to však má nevýhodu, že do elementu nepůjde rozumně vkládat obsah, protože celý začátek obsahu zabere právě padding.

Teoreticky to jde řešit odečtením marginu (ukázka) nebo absolutně posicovaným dalším elementem uvnitř (ukázka).

Použít kombinaci může mít smysl právě pro cílené odsazení obsahu shora bez dalšího vnořeného <div>u (ukázka).

Přetečení

V případě, že by se obsah náhodou nevešel do vymezeného prostoru, nabízí se:

• oříznutí (overflow: hidden – ukázka),
• zobrazení rolovací lišty (overflow: auto – ukázka), k tomu se ale hodí spíš ono absolutní posicování, jinak by se spodní padding započítal do výšky a vytvořil by ve Webkitu nežádoucí prostor na konci obsahu (ukázka).

Řešení v JavaScriptu

Ve stanoveném podílu lze výšku nastavovat i JavaScriptem. Jako výška se v takovém případě použije vydělená vlastnost clientWidth.

el.style.height = (el.clientWidth / 4) + "px";

Ukázka obou postupů