[英]Resize DIV proportionally in viewport
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%; 我目前的CSS为: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. 我假设我可能需要JS或Jquery,但这是我不知道该怎么做的东西。
Can anyone help? 有人可以帮忙吗?
Thanks in advance! 提前致谢!
Andy 安迪
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.