jquery $(window).height() not working as expected

HI

I am trying to create some jquery that will resize an image  to almost full screen, regardless of the window size... but I am having a little trouble...

in my css I have the image set to 100% width, and when the screen is resized, the image is resized correctly and with proportions maintained.. that is until you take it to a screen size where it is taller than the image, which is when I see a gap at the bottom, so in this circumstance I need to stop the heigh changing and make the width change so that less of the image is being shown (I hope this makes sense)


this cannot be done with css alone, so i turned to jquery to assist...

I figure that if I can capture the height of the browser window, and then check if the image height is less than or equal to that, then make the width of the image widen.


eg:

var $minHeight = 500;


 $( window ).resize(function() {
	
		$w = $(window).outerWidth(true);
		$h = $(window).outerHeight(true);
		
		if ($h <= $minHeight) {

                   //some code to adjust the width of the image by x pixels
                }
			
	});

Select allOpen in new window

but it turns out that the $(window).height(); function is just returning the height of my image (there is a header and footer fixed to the top and bottom of the page)

so all I am getting is the image height not the window height.... any ideas how I can get around this?

or has anyone got any code that does the function I require?