Resize DIV proportionally in viewport

Question

I have an online magazine design, which shows each page of the magazine in a carousel. The problem I have is that i want to make sure that the page is visible regardless of how a user resizes their browser.

I currently have the CSS as: width:100%; height: auto; but the problem with this is that the height goes beyond the height of the viewport as the browser gets wider. I want to make sure it's always visible - whether the viewport is landscape or portrait.

I'm assuming I need a touch of JS or Jquery perhaps, but this is something I have no idea how to do.

Can anyone help?

Thanks in advance!

Andy

Answer 1

function ResizeContent() {
   $('MyElement').css('height', $(window).outerHeight() + 'px');
   // or
   $('MyElement').outerHeight($(window).outerHeight());
}

$(window).resize(function () {
   ResizeContent();
});
ResizeContent();

Should do the trick...

UPDATE:

function ResizeContent() {
       $('MyElement').css('max-height', $(window).outerHeight() + 'px');
       $('MyElement').css('max-width', $(window).outerWidth() + 'px');
}

A Working Example