Calculating the padding-top Percentage of Aspect Ratio

This is a mathematical formula which really comes in handy when trying to maintain the proper aspect ratio of let’s say a <div> container as the screen is resized.

Here’s the formula: ( B / ( A / 100 ) ) = C%

Here’s an Example:

  • Aspect Ratio: 16:9
  • Formula: ( 9 / ( 16 / 100 ) = 56.25% )

Here’s an example of pure HTML and CSS code used to maintain the Aspect Ratio of a <div> container.

CSS:

HTML:

Credits:

Leave a Reply