Skip to content

Instantly share code, notes, and snippets.

@ozinepank
Last active May 30, 2021
Embed
What would you like to do?
The Padding-Bottom Hack
.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
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment