javascript - Proportionally scale website to fit browser window -

what elegant solution proportionally scale , center entire website fit browser window (and updating it's re-sized)

assume base layout 720x500px

content should proportionally scale fit, , re-center.

essentially, operating flash plugin: http://site-old.greensock.com/autofitarea/ (though base size known)

site contain several different types of elements in 720x500 area... ideal solution scale whole thing, not needing style each individual element (in case matters- images svg , scaling should have no negative affect on resolution)

depending on browsers need support (ie9+), achieve simple css transform.

see example in this jsfiddle

var $win = $(window); var $lay = $('#layout'); var basesize = {     w: 720,     h: 500     }  function updatescale() {      var ww = $win.width();     var wh = $win.height();     var newscale = 1;      // compare ratios     if(ww/wh < basesize.w/basesize.h) { // tall ratio         newscale = ww / basesize.w;     } else { // wide ratio         newscale = wh / basesize.h;             }      $lay.css('transform', 'scale(' + newscale + ',' +  newscale + ')');      console.log(newscale); }  $(window).resize(updatescale); 

if need backwards compatibility, size in site % or em, , use similar javascript control scale. think laborious though.