CSS VW and VH - maintain ratio
<p>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.</p>

<p>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.</p>

<p>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?</p>

<p>Here is said problem: </p>

<p><a href="https://jsfiddle.net/Lp8jynfr/1/" rel="noreferrer">https://jsfiddle.net/Lp8jynfr/1/</a></p>

<pre><code>&lt;style&gt;
.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;
}
&lt;/style&gt;

&lt;div class="page-wrapper"&gt;
  &lt;div class="text"&gt;
  This is some text I want resized
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>