Maintain aspect ratio of a element

This is quite a simple but effective

What is a aspect ratio? The proportional relationship between the elements width and height, it is commonly present in video formats but depending on the case it can be seen in other places.
The most common ones are 4:3 Classic TV, 16:9 HD TV, 21:9 Cinemascope.
We can achieve the desired aspect ratio for an element by adding padding-top of an exact amount to reflect the needed ratio. This can change its width/height as the window's width changes maintaining the ratio.

  • Aspect Ratio
  • Padding Value
  • 16:9
  • padding-bottom: 56.25%
  • 4:3
  • padding-bottom: 75%
  • 3:2
  • padding-bottom: 66.66%
  • 8:5
  • padding-bottom: 62.5%
Result Box
  • html
  • css

Share This:

Feel free to leave a comment!

You might alos be interested in: