Question

我有这段代码

<!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>

我想要的是div和img里面自动调整窗口大小调整大小。问题是，在第一次页面加载时，div下面有一个空白区域，如图1所示，当我调整窗口大小时，空间消失就像你在图2中看到的那样。为什么图1中有空格，我该如何修复它，tks这么多:)

更新Jsfiddle：http://jsfiddle.net/7bNjf/

Answer 1

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

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

在脚本部分：

function resizeImage() {
    //calculations here...
}

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

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

这当然意味着（？）在窗口的onload / onready事件中也调用了resizeImage()。

Answer 2

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

在DOM准备就绪时，图像仍在加载:)将您的逻辑放入一个函数中，并在窗口.resize和.load中重用该函数：

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

});

Answer 3

当您调整图像大小时，您将保留纵横比。如果计算出的图像高度小于窗口高度，则根据您使用的样式，图像将“停靠”在其封闭div的左上角（位置：绝对;顶部：0;左侧：0）

唯一可以让它始终填充它的封闭div的方法是剪辑它或者拉伸它并失去它的纵横比。

另一种选择是垂直居中图像。

Answer 4

您的图片位于div名称#main内，而CSS则指定#main div的高度宽度。

所以我认为你的图像的高度小于#main div高度。调整窗口大小后，使用jQuery更改#main div的高度。我认为相同的图像高度和#main div在第一次加载时解决了你的问题

Answer 5

你只能绑定＆＃34;调整大小＆＃34;尝试用＆＃34;加载＆＃34;

绑定

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

调整窗口大小调整div

5 个答案: