Have you tried using aspect-ratio on an element and contain it inside a parent, but realized it only worked on X axis for you? Well, look no further. There is a one simple trick…

I commented on the most important bits in the CSS, so you don’t have to guess which rules make the actual magic happen.

The container element in the demo is resizable. You can drag the bottom right corner to see how the code works.

Enjoy!

https://codepen.io/0ctothorp/pen/ZEjZLrj