屏幕高度动态填充框

Question

I have a box, which I am trying to size perfectly to fit within the browser viewport if the image is not larger then it. So the image would appear to be centered within the window.

Currently I don' think my method of seeking the browser height is working. And for some reason there is a lot of extra space

Example ( src )

here is where I define the page sizes

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

How I am defining screen width/height

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

Answer 1

Here is the basic of centering items to a content with javascript and css:

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

And in 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");

The margin approach guaranties that the image will stay at the center even on page resize

Answer 2

I tried here in DIVs in your case code will detect your image size itself

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

DEMO change your img width in css to see the action

if you want your div to not going outside the window after margin the image to center use that code

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

DEMO