根据屏幕高度动态填充框

Fill box dynamically with screen height

本文关键字：填充 动态 高度 屏幕      更新时间：2023-09-26

我有一个盒子，如果图像不大，我正在尝试完美地调整其大小以适合浏览器视口。因此，图像似乎在窗口中居中。

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

示例 （源）

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

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

在爪哇中：

/*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");

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

我在这里尝试过 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');
    }
});

演示

相关文章：