Maintain aspect ratio and font size based on browser height and width?

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!

possible duplicate of [Height equal to dynamic width (CSS fluid layout)](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) — GentlePurpleRain, Sep 10 '14 at 15:00
also this question : http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div/23673392 and this one : http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css — web-tiki, Sep 10 '14 at 15:31
@web-tiki this is the one that is closest if not spot on: http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css Thanks! — ClearBucket, Sep 10 '14 at 18:55
@web-tiki there is one thing missing. The font-size recalculation. — ClearBucket, Sep 10 '14 at 18:59

web-tiki · Accepted Answer · 2014-09-11T14:38:53.590

3

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

edited Sep 11 '14 at 14:38

answered Sep 11 '14 at 08:40

web-tiki

99,765
32
217
249

1

This is closer. The `font-size` resizing only works for the width and not the height. There is a bug that is know for this. The height or width must be 100% of one or the other, whichever is less. The reason that is because it would then allow it to be used in a body tag or nested as a child. Bug for vw on height: https://code.google.com/p/chromium/issues/detail?id=124331 Said to be fixed but still is broken in Chrome as well as in other browsers: http://css-tricks.com/viewport-sized-typography/ – ClearBucket Sep 11 '14 at 14:25
1

@ClearBucket just remembered `vmin` units, it can also be applied to font-size, check this out: http://jsfiddle.net/webtiki/890e1194/ – web-tiki Sep 11 '14 at 14:29

score 0 · Answer 2 · edited May 23 '17 at 10:31

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

Yours does not work with height. This has a fiddle in it that is the answer: http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css Thanks for your answer! @web-tiki got this one for finding what I was looking for. — ClearBucket, Sep 10 '14 at 18:58

Maintain aspect ratio and font size based on browser height and width?

2 Answers2

Linked