当窗口大小改变时调整 div 大小

Question

当窗口大小改变时调整 div 大小

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中会有空白间隙，我该如何解决呢？非常感谢 :)

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

- Duc Anh

你应该修剪你的代码，只显示重要的代码。 - RyanJMcGowan

1

在DOM准备就绪时，图片仍在加载 :) 将您的逻辑放入一个函数中，并在window.resize和.load内重复使用该函数。 - Roko C. Buljan

相反，将代码和css放在例如Fiddler上，并在发布中引用它，仅包括相关部分（触发器等）。 - user1693593

@JanDvorak 元标签、文档类型、脚本文件链接等等。我认为三分之一的代码行是不必要的。这个问题并不复杂，所以在这里并不是一个很大的问题，但是仅仅发布整个代码文件并不是一个好习惯，我相信你会同意这一点。 - RyanJMcGowan

@DucAnh，请查看我对Ryan评论的回复。 - John Dvorak

显示剩余7条评论

5个回答

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

});

- Roko C. Buljan

0

你只绑定在“resize”上，尝试使用“load”进行绑定。

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

- uingtea

0

当你调整图像大小时，你会保留它的长宽比。如果计算出来的图像高度小于窗口高度，则根据你使用的样式（position: absolute; top: 0; left: 0），图像将“停靠”在其包含 div 的左上角。

你唯一能让它始终填充其包含 div 的方法是要么裁剪它，要么拉伸它并失去其长宽比。

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

- Rich Wagenknecht

我真的不太理解你的回答，可以给我一些代码吗 :) - Duc Anh

0

你的图片位于名为#main的div内，在CSS中指定了#main div的高度和宽度。

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

- himadri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

重构代码，使图像的onload最初调用resize函数。

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

在脚本部分：

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

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

（以下示例使用原生JS，需要更改的关键部分是...根据需要进行修改）。

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