个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
我有这个代码
<!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/
最佳答案
重构代码，使 image.onload 最初调用调整大小函数。
<img id="preload" src="preload.png" onload="resizeImage()" />
在脚本部分:
function resizeImage() {
//calculations here...
}
window.addEventListener('resize', resizeImage, false);
(使用 vanilla JS 进行说明，其中您需要更改的关键部分是……根据需要进行修改)。
这当然意味着(？)在窗口的 onload/onready 事件中也调用了 resizeImage()。
关于javascript - 在窗口调整大小时调整 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16661267/
26
4
0
我是一名优秀的程序员,十分优秀！