Javascript 窗口调整时调整div大小_Javascript_Jquery

Javascript 窗口调整时调整div大小

javascript jquery

Javascript 窗口调整时调整div大小,javascript,jquery,Javascript,Jquery,我有这个密码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <style> html,body { width: 100%;

我有这个密码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
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%;
}
.loading {
    position:absolute;
    top: 43%;
    left: 47%;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>
    <div id="main">
        <img id="preload" src="preload.png"/>
        <img class="loading" src="../effects/loading icon/loading3.gif" />
    </div>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../player/player.js"></script>
    <script type="text/javascript" src="pic1.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());
        }).trigger('resize');
    })(jQuery);
    </script>
</body>
</html>


html，正文{
宽度：100%；
保证金：0；
填充：0；
}
#主要{
保证金：0自动；
宽度：963px；
高度：642px；
}
#预载{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.装货{
位置：绝对位置；
最高：43%；
左：47%；
z指数：2；
显示：无；
}
$（文档）.ready（函数（）{
$（窗口）.on（'resize'，function（））{
var maxWidth=$（窗口）.width（）；
var maxHeight=$（窗口）.height（）；
var比率=$（“#main”）.height（）/$（“#main”）.width（）；
如果（最大宽度*比率>最大高度）{
$（“主”）高度（最大高度）；
$（“主”）宽度（最大高度/比率）；
}否则{
$（“#main”）.width（最大宽度）；
$（“主”）高度（最大宽度*比率）；
}
$（“#预加载”）.width（$（“#主”）.width（））；
$（“#预加载”）.height（$（“#主”）.height（））；
}).trigger（'resize'）；
})（jQuery）；

我想要的是div和img内部自动调整大小与窗口大小。问题是，在第一次加载页面时，div下面有一个空格，如图1所示，当我调整窗口大小时，空格消失，如图2所示。为什么图1中有空间，我如何修复它，tks这么多：）

更新Jsfiddle:

似乎是一个答案，所以我将把它放在这里：

在DOM就绪时，图像仍在加载：）将逻辑放入函数中，并在窗口内重用该函数。调整大小并加载：

jQuery(function( $ ) {


     function resizzler(){
        var $main = $('#main');
        var maxWidth = $(window).width();
        var maxHeight = $(window).height();
        var ratio = $main.height() / $main.width();

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

    $(window).on('resize load', resizzler );

});

重构代码，以便image.onload最初调用resize函数

<img id="preload" src="preload.png" onload="resizeImage()" />

（使用vanilla JS进行说明，其中需要更改的关键部分是..根据需要进行修改）

这当然意味着（？）在窗口的onload/onready事件中也会调用

resizeImage（）。如果计算的图像高度小于窗口高度，则根据您使用的样式（位置：绝对；顶部：0；左侧：0），图像将“停靠”在其封闭div的左上角
要使它始终填充其封闭div，唯一的方法是剪裁它或拉伸它并丢失其纵横比
另一种方法是将图像垂直居中。
您的图像位于div name#main
中，在CSS中指定#main div的高度和宽度
因此，我认为您的图像的高度小于#main
div高度。调整窗口大小后，使用jQuery更改#main
div的高度。我认为相同高度的图像和#main
div解决了第一次加载时的问题您仅在“调整大小”时绑定，请尝试使用“加载”绑定
您应该修剪代码，只显示重要的代码。在DOM就绪时，图像仍在加载：）将您的逻辑放入一个函数中，并在窗口内重用该函数。调整大小和。load@RyanJMcGowan代码中没有太多其他内容。你有什么建议可以删除？一切都不重要。所有与您遇到的问题无关的html、css和javascript只会使查找重要的代码变得更加困难。fiddler和参考，在你的文章中，只有相关部分（触发器等）内联JS是旧东西，很难维护。@RokoC.Buljan，这完全取决于项目。我说这是为了简单起见（也许我应该把它改为“插图”），让OP知道他需要修复的地方。教训是，它也需要在onload事件上，所以你需要创建resizeImage函数并调用它onload，然后在resize上。@RyanJMcGowan这意味着调用resize也是在onload上执行的。我想我应该更清楚一点。将修改。这对我来说是有意义的。我想他看到了对函数的内联调用，没有花时间来了解这是如何作为解决方案的。我真的不明白你的答案，你能给我一些代码吗：）
function resizeImage() {
    //calculations here...
}

window.addEventListener('resize', resizeImage, false);

$(window).on('load resize', function()....