All geek questions in one place

Resize div to window size

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 a div and img inside for automatically resizing with window resizing. The problem is that when loading the 1st half there is a space below the div, like picture 1, and when I change the size of the window, the space disappears, as shown in Figure 2. Why is there a place in picture 1 and how can I fix it, tks so much :) Picture 1

Picture 2

Update Jsfiddle: http://jsfiddle.net/7bNjf/

+4
source share
5 answers

Rebuild the code so that image.onload calls the resize function.

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

In the script section:

 function resizeImage() { //calculations here... } window.addEventListener('resize', resizeImage, false);

(using vanilla JS to illustrate where the key parts you need to change change as needed).

This implies, of course (?), That resizeImage() also called in the onload / onready event for the window.

+5
source

Sounds like an answer, so I'll put it here:

In the DOM, the images are still ready to be loaded :) Put your logic in the function and reuse this function inside the .resize and .load window:

 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 ); });
+1
source

When you resize the image, you keep the aspect ratio. If the calculated image height is less than the window height, the image will be “docked” with the upper left corner of it surrounding the div, taking into account the style used (position: absolute; top: 0; left: 0)

The only way you can get it to always fill it, including the div, is to either pin it, or stretch it and lose proportions.

Another alternative is to center the image vertically.

0
source

Your image is inside the div name #main , and in CSS you specify the height width of the #main div.

So, I think your image has a lower height than the height of the div #main . After resizing the window, you change the height of the #main section with jQuery. I think the same image height and #main div solves your problem on first load

0
source

you only bind resize, try bind to load

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

Source: https://habr.com/ru/post/1481864/

More articles:


All Articles