Jonathan Bishop Jonathan Bishop - 1 year ago 88
CSS Question

Fixed ratio page auto scale

I have this table. I need to style it to always be in 16 by 9 ratio withn the top row taking up a fixed amount and the bottom row taking up the rest of the page. A single font size across the whole table and the whole thing centered with page when the screen isn't 16 by 9

<body class="clock">
<table class="clocktable">
<td id="clock" class="time">
<td id="timer" class="timing">
<td colspan="2" id="eventnotes" class="notesevent">

The solution need to work on desktop browsers as well as mobile.
I know i could do it with java script and resize every element based on the page width, However I feel that there should be a better way.

Answer Source

Have decided to use javascript and jquerry. The table is styled to 100% width and height of page. The bottoom row fills the fage because the top row has its height specified.

function resize() 
            var textheight = (($(window).width()) / 10);
   = (textheight) + 'px';
   = (textheight*1.2) + 'px';
        $(document).ready(function() {resize()});
        $(window).resize(function() {resize()});

Here is my script.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download