屏幕高度動態填充框

Question

我有一個盒子， 如果圖像不大的話，我試圖將其調整為適合瀏覽器視口的大小。 因此，圖像看起來似乎在窗口內居中。

目前，我認為尋求瀏覽器高度的方法行不通。 由於某些原因，還有很多額外的空間

例子 （ 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");

頁邊距方法保證即使頁面調整大小，圖像也將保持在中心

Answer 2

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

演示