The Padding-Bottom Hack

Padding-Hack.css

.img-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Article : http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
B / (A / 100) = C%

So for 16:9 (where 16 is A and 9 is B):

9 / .16 = 56.25 (%)

And that’s all there is to it!

Some Other Common Ratios

For the not so mathematically inclined, here are some of the percentages for common aspect ratios:

75% = 4:3
66.66% = 3:2
62.5% = 8:5
100% = 1:1
*/