在視口中按比例調整DIV大小

Question

我有一個在線雜志設計，可以在輪播中顯示雜志的每一頁。 我的問題是，無論用戶如何調整瀏覽器大小，我都希望確保該頁面可見。

我目前的CSS為：width：100％; 高度：自動； 但是這樣做的問題是，隨着瀏覽器變寬，其高度會超出視口的高度。 我想確保它始終可見-視口是橫向還是縱向。

我假設我可能需要JS或Jquery，但這是我不知道該怎么做的東西。

有人可以幫忙嗎？

提前致謝！

安迪

Answer 1

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

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

應該做到這一點...

更新：

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

一個有效的例子