javascript - Scale div to fill screen while maintaining aspect ratio -

here's jsfiddle of page i'm talking about: http://jsfiddle.net/nmuuu/

i need outer div (with class="page") expand or shrink fill user's screen. want aspect ratio of div (and obviously, children) stay same. i've tried plaing jquery plugins textfill, had no success.

i've done thousand times image, time have div bunch of elements inside. can still done?

edit: seems may not have emphasized this, want children of div increase in size well. should if div image has been scaled up; elements inside should maintain relationship 1 another, while expanding fill parent. should go looking this looking this (border added indicate screen edges).

while pure css nice, i'm guessing it's going involve javascript. couple pointers appreciated.

i don't think can done css currently, need able read width of elements, cannot done @ moment. since js ok now, using jquery:

function zoomit() {   $("#page1").css('zoom', $(window).width() / $("#page1").width()); }  $(document).ready(zoomit);  $(window).resize(zoomit); 

here's jsfiddle

here's jsfiddle of latest version doesn't use zoom -transform vendor tags only.

edit:

i realised zoom doesn't work on firefox. instead use -moz-transform: scale(x, y); firefox , set x , y appropriate values, can work out in same way have done in example above.

edit2

here's a link w3schools info css 2d transforms , prefixes other browsers, mentioned in comments, writing checks if width > height , other way around, , basing transform on that, should trick browsers. post jsfiddle if working , i'll add answer, i'm happy have go @ if don't working.