Pure CSS Aspect Ratio
If you need to preserve an aspect ratio, this can be done by calculating the aspect ratio to a percentage, and setting the padding-top to it.
The below code demonstrates keeping a 100:50 aspect ratio.
The can be some issues when adding content to the element with the aspect ratio. However there are a few solutions to this.
You can add a negative margin to the items, or add a wrapper around the aspect ratio div.
Leave a Comment