resize div on window resize
Question
I have this code
<!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>
What I want is the div and the img inside to auto resize with window resize. The problem is, on 1st time page load, there is a blank space below the div like Picture 1, and when I resize window the space disappear like you can see on Picture 2. Why there is space in Picture 1 and how can I fix it, tks so much :)
Update Jsfiddle : http://jsfiddle.net/7bNjf/
5 answers
solution1
5
Refactor the code so that the image.onload calls the resize function initially.
<img id="preload" src="preload.png" onload="resizeImage()" />
In the script section:
function resizeImage() {
//calculations here...
}
window.addEventListener('resize', resizeImage, false);
(using vanilla JS for illustration where the key-parts you need to change are.. modify as needed).
This implies of course (?) that resizeImage() is also called in the onload/onready event for the window.
solution2
1 2013-05-21 02:39:13
Seems like an answer so I'll put it here:
On DOM ready the images are still loading :) Put your logic into a function, and reuse that function inside window .resize and .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 );
});
solution3
0 2013-05-21 02:57:05
When you're resizing the image you're preserving the aspect ratio. If the calculated image height is less that the window height, the image will be "docked" against the top left corner of it's enclosing div given the styling you used (position: absolute; top: 0; left: 0)
The only way you can get it to always fill it's enclosing div is to either clip it or to stretch it and lose it's aspect ratio.
Another alternative is to center the image vertically.
solution4
0 2013-05-21 03:23:40
Your image is inside a div name #main and in CSS you specify the height width of the #main div.
So I think your image have smaller height than the #main div height. After the resize the window you change the height of the #main div using jQuery. I think the same height of image and #main div solves your problem at first time load
solution5
0 2016-02-03 17:39:07
你只绑定“调整大小”尝试绑定“加载”
$(window).on('load resize', function()....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.