0

A common method to preserve width/height ratio is to apply a padding-top and the typical example is padding-top: 56.25%; for 16:9 ratio. But how is this calculated? What if I want a 10:5, 5:5 or some other ratio?

Community
  • 1
  • 1
drake035
  • 3,955
  • 41
  • 119
  • 229

1 Answers1

2

Nesting an element with 100% width inside a “responsive” percentage-based-width parent element. You can then declare a percentage for bottom or top padding based on the ratio required. Formula to calculate percentage based on different aspect ratios:

C% = ( 100 / A ) * B

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

C% = ( 100 / 16 ) * 9 = 56.25%

And that’s all there is to it!

Here are some of the percentages for common aspect ratios:

75% = 4:3
66.66% = 3:2
62.5% = 8:5
Zeeshan S.
  • 2,041
  • 2
  • 21
  • 40