javascript - 在调整浏览器窗口大小时，使浏览器窗口与元素的大小相同。 或至少保持与元素具有相同的浏览器长宽比(make the browser window as same as the element's size while resizing browser window. or atleast maintain same aspect ratio of browser as element have)

Question

while resizing my browser window i can resize the element div in it.(在调整浏览器窗口大小的同时，我可以在其中调整元素div的大小。)

But unwanted spaces/scope on left, right, top and bottom are appearing.(但是出现在左侧，右侧，顶部和底部的多余空间/范围。) I want the browser window's size as same as the div have.(我希望浏览器窗口的大小与div相同。) Or atleast find the aspect ratio of a div and accordingly we maintain same aspect ratio of the browser window.(或者至少找到div的长宽比，因此我们保持浏览器窗口的长宽比相同。) Ex: if div aspect ratio is 16:9, then we make the browser aspect ratio also same so that we can remove the unwanted space/scope in the browser window.(例如：如果div宽高比为16：9，则我们使浏览器的宽高比也相同，以便我们可以删除浏览器窗口中不需要的空间/范围。)

This is a sample script, instead of using div im using canvas.(这是一个示例脚本，而不是使用canvas来使用div im。)

Help me with this.(帮帮我)

<style>
*{padding:0; margin:0}
html,body {
width: 100%;
margin: 0;
padding: 0;
}
#main {
margin: 0 auto;
width: 963px;
height: 642px;
}
#preload {
display: block;
position: absolute;
width: 100%;
height: 100%;
margin:auto
}
.loading {
position:absolute;
top: 43%;
left: 47%;
z-index: 2;
display: none;
}
section{
position:absolute;
top:0
}
a1, a2, a3, a4, a5{display:block}
</style>
<div id="main">
    <img id="preload" src="preload.jpg"/>
    <img class="loading" src="image.jpg" />

    <section>
        <a1></a1>
        <a2></a2>
        <a3></a3>
    </section>
</div>

<script src="jquery-3.4.1.min.js"></script>



<script>        
    $(document).ready(function() {
    $(window).on('resize', function(){
        var maxWidth = $(window).width();
        var maxHeight = $(window).height();

        var ratio = $("#main").height() / $("#main").width();

        if(maxWidth * ratio > maxHeight) {
            $("#main").height(maxHeight);
            $("#main").width(maxHeight / ratio);
        } else {
            $("#main").width(maxWidth);
            $("#main").height(maxWidth * ratio);
        }
        $("#preload").width($("#main").width());
        $("#preload").height($("#main").height());

        $("a1").text(maxWidth);
        $("a2").text(maxHeight);
        $("a3").text(ratio);        
    }).trigger('resize');
})(jQuery);

  ask by Venkat Akula translate from so

Answer 1

I'm not 100% sure what you are looking for but you can set any element to fill the browser like so...(我不是100％不确定要寻找什么，但是您可以像这样设置任何元素来填充浏览器...)

.element{
width:100%;
height: 100vh;
}