如何基于高度创建元素宽度长宽比？ （使用CSS）

Question

一段时间以来，我一直在使用height:0; padding-bottom:100%;基于元素的宽度（一个完美的正方形，以及通过更改百分比的其他比例）来创建1：1比例的元素。我基本上希望创建相同的结果，但要基于高度而不是宽度。无论如何，只有使用CSS才能实现这一目标？可以创建一个或两个孩子，只是希望不要为此使用图片或JavaScript。

我也不能使用VW，因为元素的高度是基于父级的，所以VH是这样；

Here is an mockup example