Maintain aspect ratio and font size based on brows

Question

The code below is attached to window.onresize = resize;. The baseWidth and baseHeight are read on load as a basis for the calculations. The main variable is defined just by setting it to the main html node. The font is set on a block element to cause all of the em based elements within it to resize in kind. When the width or height of the browser is changed then the ratio is recalculated. Please see demo to understand what I achieve with JS but would like to find a pure CSS solution: http://codepen.io/anon/pen/nLauF

I have been exploring options in CSS3 such as calc. Feel free to also suggest any improvements to the JS below also.

             function resize() {
                var height = 0,
                    width = 0;

                if(window.innerWidth <= window.innerHeight) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;

                } else {
                    size = window.innerHeight / baseHeight;
                    height = window.innerHeight;
                    width = baseWidth * size;
                }

                if(baseWidth * size > window.innerWidth) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;
                }

                main.style.height = height + "px";
                main.style.width = width + "px";
                main.style.fontSize = size * 16 + "px";
            }

Thanks!

Answer 1

I adapted a piece of CSS i wrote for a different project to solve your problem: JSFiddle DEMO I achieved the aspect ration of 4-3 by using a .75 multiplier (i.e. the width of main is 50% and the height should be 75% of that so the padding-top is 37.5%). You can see how these are adjustable to lock in your ratio.

.main {
  width: 50% !important;
  height: 0;
  display: block;
  overflow: hidden;
  line-height: 0;
  position: relative;
  padding: 37.5% 0 0 0;
  background-color: #000;
  margin: 0 auto;
}
.main-inner {
  position: absolute;
  display: block;
  margin: auto;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}
.main-inner-relative {
    position: relative;
    padding: 10px;
}
p { 
  color: white; 
  padding: 0;
  margin: 0;
}

This would require you to modify your HTML like so:

<div class="main">
    <div class="main-inner">
        <div class="main-inner-relative">
            <p>hello</p>
        </div>
    </div>
</div>

reference 1 -- this reference is my original solution used to keep images locked into an aspect ratio responsively

reference 2

Answer 2

I wrote this code including font-size calculation with vmin units :

DEMO

CSS :

main {
    width: 80vmin;
    height: 60vmin;
    background-color: #000;
    position: absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
h1 {
    color: #fff;
    font-size: 30px; /* general fallback */
    font-size: 5vm; /* IE9 fallback */
    font-size: 5vmin;
}

For browser support, you can check canIuse