CSS how to get current screen ratio

Question

I am trying to set the element size in proportion to the viewer screen ratio.

<style>
.element {
  background: red;
  width: 100px;
  height: calc(100vh/100vw * 100%);
}
</style>

<div class="element">
</div>

There seems to not be a CSS variable that defines the current screen ratio.

Screen ratio query is not preferable since this will require me to define every ratio.

Thank you.