Question

我有一个盒子，我想要完美地调整大小以适应浏览器视口如果图像不大于它。因此图像看起来在窗口中居中。

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

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

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

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

DEMO

使用屏幕高度动态填充框

2 个答案: