dynamic height which is relevant to width

by evilReiko

HTML

<div class="row">
    <div class="box" style="background:red;">
        1
    </div><div class="box" style="background:green;">
        2
    </div><div class="box" style="background:blue;">
        3
    </div><div class="box" style="background:#888888;">
        4
    </div><div class="box" style="background:#cccccc;">
        5
    </div>
</div>
</div>

CSS

.row {/*container*/
    width: 100%;
    line-height: 0%;/*to remove space between rows, but you may need to add the line-height to the .box to adjust it*/
}
.box {
    width: 25%;
    height: 0;
    padding-bottom: 25%;/*this will act as the height*/
    display: inline-block;
    /*additional optional fields*/
    overflow: hidden;
    line-height: 125%;
}