CSS VW and VH - maintain ratio

Question

I have a page that contains a DIV which maintains an aspect ratio. I have some text within the div that uses VW on the font size which maintains the text size when the page width changes - which is great.

But when the user changes the window height - I cannot get it to respond in the same way - because VW and VH don't play together.

Is there some CSS or Javascript trickery to get this to work? Ideally on the fly in case the user changes the browser size whilst on the site?

Here is said problem:

https://jsfiddle.net/Lp8jynfr/1/

<style>
.page-wrapper{
    width: 100vw; 
    height: 68.60vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 145.7vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    border: 5px solid #000;
}

.text{
    position: absolute;
    width:100%;
    top:36%;
    left:0;
    right:0;
    font-size: 5.6vw;
    color:#2d90db;
    text-align:center;
}
</style>

<div class="page-wrapper">
  <div class="text">
  This is some text I want resized
  </div>
</div>

Answer 1

Take a look at this new fiddle: https://jsfiddle.net/davey182673/Lp8jynfr/4/ It uses the following media query to detect the viewport aspect ratio.

...
.text {
    font-size: 5.625vw;
}

/* at the point when the media query is applied */
/* 5.625vw = 10vh */
@media (min-aspect-ratio: 16/9) {
  .text {
    font-size: 10vh ;
  }
}