Pure CSS Aspect Ratio

0 comments

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.



Comments


Leave a Comment