javascript - 在视口(viewport)中按比例调整 DIV 的大小

Question

我有一个在线杂志设计，它在轮播中显示杂志的每一页。我遇到的问题是，无论用户如何调整浏览器大小，我都想确保页面可见。

我目前的 CSS 为:宽度:100%；高度:自动；但问题在于，随着浏览器变宽，高度会超出视口(viewport)的高度。我想确保它始终可见 - 无论视口(viewport)是横向还是纵向。

我假设我可能需要一点 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');
}

A Working Example