在视窗中按比例调整DIV大小

Resize DIV proportionally in viewport

本文关键字：调整 DIV 大小 按比例      更新时间：2023-09-26

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

我目前有CSS为:宽度:100%;高度:汽车;但这样做的问题是，随着浏览器变宽，高度超出了视口的高度。我想确保它总是可见的——无论视口是横向还是纵向。

我假设我可能需要一点JS或Jquery，但这是我不知道如何做的事情。

有人能帮忙吗?

提前感谢!

安迪

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');
}

工作示例

相关文章：