Determining the height and width of the browser to resize the image in full screen

Question

I am trying to use jquery to get the height and width of the browser, and not to use this information to resize my image to fit those sizes. I want the images to be displayed in full screen on every page, regardless of whether they are viewed on a laptop or a large monitor. Now I have all my images with a standard width of 1280 dpi.

To see what I have, I posted my code for my nyu account: http://i5.nyu.edu/~ejs426/

Answer 1

JQuery

var W = $(window).width(), H = $(window).height(); $('img').height(H).width(W); 

In resize mode

 function imgsize() { var W = $(window).width(), H = $(window).height(); $('img').height(H).width(W); } $(window).bind('resize', function() { imgsize(); }); 

CSS

 img {height: 100%; width: 100%;} 

Answer 2

This can only be done using CSS. I suggest checking out this lesson:

http://css-tricks.com/3458-perfect-full-page-background-image/

The code below provides a super easy way for CSS3 to do things. The tutorial also offers other options.

 html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Answer 3

This is what I used in the past, setting the default height and width, and then trying to calculate it, trying to get different viewport sizes.

 var myWidth = 800; var myHeight = 600; if ($.browser.msie) { if (typeof (window.innerWidth) == 'number') { myWidth = window.innerWidth; myHeight = window.innerHeight; } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } } else { myWidth = $(window).width(); myHeight = $(window).height(); }