javascript - 使用调整大小脚本使我的横幅看起来与窗口大小相同。当我强行缩小浏览器时，为什么我的横幅会出现问题？

Question

My current development

我现在只添加了横幅，以及我需要的脚本。每次我自己调整浏览器大小时，横幅永远不会像它应该的那样跟随。我将为移动设备创建后备尺寸，但我想先解决这个问题。我注意到脚本可能存在问题，但我不确定是什么。

代码:

$(document).ready(function ($) {
	
ResizeImage();
	
	$(window).resize(function() {
	
	ResizeImage();
	});
	
});

function ResizeImage(){

	
	if ($('.bg').height() <= $(window).height()){
		
	if ($('.bg').height() == 0 || $('.bg').height() == undefined){
		$('.banner').css('height', $(window).height() - $(".banner").offset().top);	
	}else
	{	
	$('.banner').css('height', $('.bg').height() - $(".banner").offset().top);
	}
	}
	else
	{
	$('.banner').css('height', $(window).height() - $(".banner").offset().top);
	}
	

}

body {margin: 0; padding: 0;}

.banner {
    display: block;
    overflow: hidden
}

.bg {
    background: url(../img/banner.png);
    background-size: cover;
    height: 100%;
    background-color: #222;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

<div class="banner group">
    <div class="bg">
        <img src="img/banner.png" style="display: none;" alt="Scratch Media Delivers Explosive Design Options">
    </div>
</div><!--end banner-->

Answer 1

改用 css。

position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;

将它应用于图像