CSS3 responsive aspect ratio block

index.html

<div class="ratio" style="padding-top: 40%">
    <div class="ratio-content">
        This block is 40% ratio height
    </div>
</div>

style.css

.ratio {
    /* set inline ratio padding-top in % */
    position: relative;
}
.ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}