javascript - 使用屏幕高度动态填充框

Question

我有一个盒子，我正在尝试调整它的大小以使其完全适合浏览器视口(viewport)如果图像不比它大。所以图像会出现在窗口的中心。

目前我不认为我的寻求浏览器高度的方法有效。由于某种原因，有很多额外的空间

Example ( src )

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

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;

Answer 1

这是使用 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");

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