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:

/

<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>

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 10, 2016 at 20:16 user3706091user3706091 12511 gold badge33 silver badges1212 bronze badges 10

• What do you mean with "VW and VH don't play together"? The aspect ratio is always the same!? – Fantasterei Commented Oct 10, 2016 at 20:22
• You can try to use CSS calc to calculate the correct sizes. e.g. width: calc(100vw / 1.6) or width: calc(100vw / 3vh). – Fabian Schultz Commented Oct 10, 2016 at 20:23
• you've got to do this in two separate cases: one where height is the limiting factor and another where width is the limiting factor. update the class based on that, using the resize handler (api.jquery./resize since you're using jQuery). The font-size will be proportional to vw in one case and vh in the other. – andi Commented Oct 10, 2016 at 21:04
• 1 Take a look at vmin or vmax if you want a property that will depend on the smallest or largest side of the viewport respectively. – Davey Commented Oct 10, 2016 at 21:05
• 1 Here is an update of your fiddle, using the vmin Davey suggested: jsfiddle/Lp8jynfr/2 – Asons Commented Oct 10, 2016 at 21:16

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 5

Take a look at this new fiddle: https://jsfiddle/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 ;
  }
}

I ended up doing some Jquery to get this to work, it works pretty smoothly

I added an attribute to the DIV to tell the Jquery a font size, then did some calculations on the height of the parent container to get it to scale depending on the height of the DIV

$(window).on("resize", function () {

    $('.resize').height(function(){
        $height = $(this).parent().parent().height();
        $datasize = $(this).attr("data-size");
        $fontsize = $height/100  * $datasize+"px"
        $(this).css("font-size",$fontsize);
    });

}).resize();

<div class='resize' data-size="9">Some text I want to resize</div>