keep element ascpect ratio - responzive

by Pavel Kutáč

HTML

Box bez obsahu lze udělat velmi jednoduše:

<div class="wrapNoAbsolute">
    <div class="inner">        
    </div>
</div>
Řešení boxu s obsahem:
<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>

CSS

.wrap, .wrapNoAfter, .wrapNoAbsolute{
    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;
}
.wrapNoAbsolute .inner{
    padding-bottom: 50%;
    overflow: hidden;
}