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