Dodržení proporcí elementu při responzivu

V designu fotogalerie nového webu Majálesu Ostrava jsem dostal nakreslené složky alb. Design měl být také responzivní a já věděl, že když se zmenší šířka a výška ne, nebude to pěkné. Hledal jsem tedy způsob jak měnit výšku v závislosti na šířce. Tak krásně jako je znázorněno v obrázku, to samozřejmě nepůjde.

Využití procentuálního paddingu

Trik je v použití procent v CSS vlastnosti padding. Pokud využijeme procentuální hodnoty v libovolném směru paddingu, vždy se dopočítají podle šířky elementu.

Na webu Majálesu jsem použil řešení pomocí :after selektoru, což nám omezí funkčnost starých prohlížečů, ale i toto se dá předělat na další vnořený element.

Element bez obsahu

Protože padding nám posouvá obsah elementu, výsledný poměr nemusí být dodržován, pokud nám obsah poroste do výšky při zmenšování. Pokud ale element může zůstat prázdný, je to velmi jednoduché.

<div class="wrapNoAbsolute">
    <div class="inner">        
    </div>
</div>

.wrapNoAbsolute{
    background: #ee5555;
    margin: 10px;
    position: relative;
    width: 30%;    
}
.wrapNoAbsolute .inner{
    padding-bottom: 50%;
    overflow: hidden;
}

Element s obsahem

Většinou však budeme chtít do boxu vložit další obsah, nejjednodušší řešení je využití absolutně pozicovaného vnitřního elementu. Toho se dá docílit přes :after selektor nebo druhého vnořeného elementu.

<div class="wrap">
    <div class="inner">
        Box s dodržováním proporcí při změně velikosti,
        řešení pomocí :after elementu s absolutním pozicováním
    </div>
</div>
<div class="wrapNoAfter">
    <div class="paddingBox">
        <div class="inner">
            Box s dodržováním proporcí při změně velikosti,
            řešení s dalším vnitřním elementem
        </div>
    </div>
</div>

.wrap, .wrapNoAfter{
    background: #ee5555;
    margin: 10px;
    position: relative;
    width: 30%;    
}
.wrap:after, .wrapNoAfter .paddingBox{
    content: '';
    display: block;
    padding-top: 67.8%;
}
.wrap .inner, .wrapNoAfter .inner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;    
    padding: 5px;
}

Demo a tipy

Živou ukázku tohoto řešení můžete nalézt na JSFiddle

Na webu Majálesu jsem toto řešení spojil zároveň s vyplněním elementu obrázkem, popsaným v minulém článku.