And other fixed ratio elements
This square dimensions are only defined by width:100% and padding-bottom:100%.
The counter-intuitive rule its based on is: a percentage value on top/bottom padding or margins is relative to the width of the containing block
Using this rule you can create elements that are responsive or elastic, but always keep the same ratio. Check below for a video container example.
This element always keep a 16:9th ratio (for HD video). Try shrinking or enlarging the browser.
This element dimensions are only defined by width:100% and padding-bottom:56.25%.
This element always keep a 9:16h ratio (for HD video). Try shrinking or enlarging the browser.
This element dimensions are only defined by width:50% and padding-bottom:28.125%.
For 1:1 ratio, use padding-bottom 100 %
For 16:9 ratio, use padding-bottom 56.25 %
For 9:16 ratio, use padding-bottom 177,77 %
For 4:3 ratio, use padding-bottom 75 %
For 3:2 ratio, use padding-bottom 66.66 %
For 8:5 ratio, use padding-bottom 62.5%
For 16:9 ratio, use padding-bottom 56.25 %
Because 16/9=0.5625
For 9:16 ratio, use padding-bottom 177,77 %
Because 9/16=1.7777
You can use Ratio Buddy for all your calculations!