Resize image as window resizes using Javascript - not working in Chrome

Question

I'm using the following javascript to resize image as window resizes which works correctly in all browsers except Chrome:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >    
</body>
</html>

The problem with Chrome is that the image does not resize to fit the window size when the page first loads but when you resize the browser window after it loaded, the image then correctly resizes to the resized browser window.

Try clicking on http://www.mnhscs.com/christmas

Oddly this problem does not occur everytime the page is loaded in Chrome. Sometimes the image resizes correctly.

Next time try to add code in your own question to avoid dead link ;) — Gaëtan Maisse, Nov 28 '14 at 14:07

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Because you're using $(document).ready you have a race condition on your image loading. Sometimes the image will be done loading before your sizing function is called because .ready() only waits for the dom to be done, not for the images to load. You need to use document.load() which will wait for the images to load as well. The reason you're seeing this in Chrome only is because it's blazing fast :)

Official way to ask jQuery wait for all images to load before executing something

Make sure when you're testing in chrome you turn off your cache. I would not be surprised if the image being cached masked the problem, because the image would load as quickly as the DOM does.

Disabling Chrome cache for website development

edited May 23 '17 at 12:05

Community

1
1

answered Nov 28 '14 at 14:46

Jazzepi

4,722
6
49
73

Your link [http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin] suggests using `$(window).load(function() {`, not document.load() as you suggest. I tried both and neither make any difference with Chrome. The image still loads larger than the window size in Chrome as explained above. – Biltong Dec 01 '14 at 11:23
Did you make sure to turn off your cache? – Jazzepi Dec 01 '14 at 13:15
Yes, I did turn off cache in Chrome using the method you linked to and loaded the page with the Developer Tools open. – Biltong Dec 01 '14 at 15:53
Try placing the script right before the
tag, instead of at the top.
– Jazzepi Dec 01 '14 at 17:30
I moved the script down before
, no change. Also, replacing `$(document).ready(function() {` with `$(document).load(function() {` causes the image vertical resize to stop working correctly and using `$(window).load(function() {` behaves the same as `$(document).ready(function() {`.
– Biltong Dec 02 '14 at 10:51

wwwmarty · Answer 2 · 2014-12-01T15:41:59.723

0

$(window).bind('load resize', function() { set_body_height(); });

A few words of explanation, as requested.

As described in other answers, set_body_height should be called from the onLoad event initially, and then listen for resize events. Since document.ready() is fired first, you can bind both events to the same handler, as shown.

Seemed self explanatory.

edited Dec 01 '14 at 15:41

answered Nov 28 '14 at 14:51

wwwmarty

818
4
10

1

Code only answers can almost always benefit from a few words of explanation. – Jason Aller Nov 28 '14 at 17:56
1

A few words of explanation would be beneficial! – Biltong Dec 01 '14 at 11:25
I'm not a Javascript programmer so still struggling to understand what changes I should be making to the code in my question, according to your suggestions. Thanks for your patience! – Biltong Dec 02 '14 at 10:56
just add the keyword 'load' alongside 'resize'. That way the function will run on both events. You can remove the set_body_height() call that comes before. – wwwmarty Dec 02 '14 at 16:51
I've changed the code as suggested and it makes no difference to the behaviour with Chrome. – Biltong Dec 04 '14 at 12:08

Kami · Answer 3 · 2014-12-01T11:22:43.567

0

As @Jazzepi pointed out the javascript might not be running as expected in some instances.

However, there is also a CSS only option for applying 100% window height - vh.

.fit {
  height: 100vh;
}

This will ensure the element resizes to the correct height. The vh suffix applies a percentage of the viewer height to the element - 100 in this instance.

Fiddle : http://jsfiddle.net/87avhd4v/1/

edited Dec 01 '14 at 11:22

answered Nov 28 '14 at 14:52

Kami

18,269
4
43
62

I substituted `.fit { max-width: 100%; max-height: 100%; }` with `.fit { height: 100vh; }` and this caused the image resizing with the window resizing to stop working in Chrome & not tested in other browsers. – Biltong Dec 01 '14 at 11:16
@Biltong - There may be other code interfering. The fiddle - http://jsfiddle.net/87avhd4v/1/ - works as expected. – Kami Dec 01 '14 at 11:22
Whilst this is a far simpler method, it performs differently to what the JS attempts to achieve. It doesn't work as it should when resizing the browser window horizontally beyond a certain point without scroll bar. – Biltong Dec 01 '14 at 15:58

Resize image as window resizes using Javascript - not working in Chrome

3 Answers3