Javascript 用屏幕高度动态填充框

我有一个长方体，我正在尝试将其大小调整到完全适合浏览器视口的大小，如果图像不比它大。因此，图像将显示在窗口的中心

目前我认为我寻找浏览器高度的方法不起作用。由于某种原因，这里有很多额外的空间

（）

这里是我定义页面大小的地方

if ( style['img-width'] > screenwidth ) {
    style['body-width'] = style['img-width'] + ( style['img-padding'] * 2 );
} else {
    style['body-width'] = screenwidth;
}

style['body-height'] = ( style['img-height'] > screenheight ) ? 
                         ( style['img-height'] + 
                           ( style['img-padding'] * 2 ) + 
                           style['header-height'] 
                         ) : 
                         screenheight;

$('body').css({ 'width': style['body-width']+'px' });

theater.css({
            'width': style['body-width']+'px',
            'height': style['body-height']+'px',
            });

theaterheadcon.css('width', style['body-width']+'px');
theaterheader.css('width', style['body-width']+'px');

我如何定义屏幕宽度/高度

screenwidth = isNaN(window.outerWidth) ? window.clientWidth : window.outerWidth,
screenheight = isNaN(window.outerHeight) ? window.clientHeight : window.outerHeight;

---

以下是使用javascript和css将项目集中到内容的基本方法：

/*css*/
#myImage
{
    position:absolute;
}

在java中：

/*javascript*/
var img=$('#myImage');
var winWidth=$(window).width();
var winHeight=$(window).height();

if(img.height()>winHeight)
{
    img.css('height', winHeight + "px");
}
img.css('left',(winWidth/2) + "px");
img.css('top',(winHeight/2) + "px");
img.css('margin-left',(-(img.width()/2)) + "px");
img.css('margin-top',(-(img.height()/2)) + "px");

---

边距方法保证即使在调整页面大小时，图像也会保持在中心位置

我在案例代码中的DIVs中尝试过，它会检测图像本身的大小

 $(document).ready(function(){
            var windowheight = $(window).height();
            var windowwidth = $(window).width();
            var boxheight = $('#box').outerHeight();
            var boxwidth = $('#box').outerWidth();
            var imgheight = $('.img').outerHeight();
            var imgwidth = $('.img').outerWidth();
            if(imgheight > boxheight || imgwidth > boxwidth){
            $('#box').css('height', windowheight).css('width', windowwidth);
            $('.img').css('margin-left',((windowwidth - imgwidth)/2)+'px');
             $('.img').css('margin-top',((windowheight - imgheight)/2)+'px');
        }
    });

更改css中的img宽度以查看动作

如果你想让你的div在图像居中边缘后不离开窗口，那么使用该代码

$(document).ready(function(){
        var windowheight = $(window).height();
        var windowwidth = $(window).width();
        var boxheight = $('#box').outerHeight();
        var boxwidth = $('#box').outerWidth();
        var imgheight = $('.img').outerHeight();
        var imgwidth = $('.img').outerWidth();
        if(imgheight > boxheight || imgwidth > boxwidth){
        $('#box').css('position','absolute').css('width', 'auto').css('height', 'auto').css('left', '0').css('top', '0').css('right', '0').css('bottom', '0');
        $('.img').css('margin-left',((windowwidth - imgwidth)/2)+'px');
         $('.img').css('margin-top',((windowheight - imgheight)/2)+'px');
    }
});

---

您是否尝试了$（window）.height（）来获取窗口高度，然后使用css方法将其设置为图像高度？我在代码下面添加了获取窗口高度的方法。我使用最小高度：100vh，而不是JavaScript解决方案；除非你绝对想支持IE8或更低版本…问题是图像是浮动的，并且总是会有不同的高度/宽度，高达5MP。仍然不明白为什么要用JavaScript经历所有的麻烦。一个很好的100vh解决方案应该是这样的：。感谢您的提醒，尽管最好遵循OP var范围。感谢您的提醒，尽管最好遵循OP var范围。