Scaling

by newsash

HTML

<div id="body-wrap">
<div id="d1"><img src="http://widefon.com/_ld/106/94427444.jpg" alt="" width="400" height="225"/></div>
<div id="d2"><img src="http://widefon.com/_ld/106/94427444.jpg" alt="" width="80" height="45"/></div>
<div id="d3"> </div>
<div id="d4"> </div>
</div>

CSS

/*#body-wrap {
     -moz-transform:    scale(0.5);
     -o-transform:      scale(0.5);
     -webkit-transform: scale(0.5);
     transform:         scale(0.5);
}/**/
#body-wrap {
    position: relative;
}

body { overflow:hiden; margin:0px; }

#d1 { width:80%; height:80%; position:absolute; top:0px; left:0px; }
#d2 { width:80%; height:20%; position:absolute; bottom:0px; left:0px; }
#d3 { width:20%; height:70%; position:absolute; top:0px; right:0px; }
#d4 { width:20%; height:30%; position:absolute; bottom:0px; right:0px; }

#d1 { background-color: #550 }
#d2 { background-color: #055 }
#d3 { background-color: #500 }
#d4 { background-color: #050 }

JavaScript

var width0 = $(window).width();
var height0 = $(window).height();

$('#body-wrap').css({
        width: width0,
        height: height0,
});

//alert(width0 + ' ' + height0);

$(window).resize(OnResize);

function OnResize() {
    var scaleH = $(window).height()/height0;
    var scaleW = $(window).width()/width0;
    var scale = (scaleH > scaleW) ? scaleW : scaleH;
//    alert(scale);
    $('#body-wrap').css({
        position: 'relative',
        top: -height0*(1-scale)/2,
        left: -width0*(1-scale)/2,
        transform: 'scale('+scale+')',
        webkitTransform: 'scale('+scale+')',
        transform: 'scale('+scale+')',
    });
    $('body').css({
        width: $(window).width(),
        height: $(window).height(),
    });
}