5

我有这个代码

<!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这么多:) 图片1

图二

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

4

5 回答 5

5

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

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

在脚本部分：

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

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

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

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

于 2013-05-21T02:41:01.927 回答
1

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

在 DOM 准备就绪时，图像仍在加载 :) 将您的逻辑放入一个函数中，并在 window .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 );

});
于 2013-05-21T02:39:13.640 回答
0

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

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

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

于 2013-05-21T02:57:05.513 回答
0

您的图像位于 div 名称#main中，并且在 CSS 中您指定 #main div 的高度宽度。

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

于 2013-05-21T03:23:40.803 回答
0

you bind only on "resize" try bind with "load"

$(window).on('load resize', function()....
于 2016-02-03T17:39:07.660 回答