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