$(window) or $(document) to measure width and height to auto fit images in browser with every screen

Question

I have to fit all the images on a screen with every screen resolution.

Which should i use $(window) or $(document) to measure height /width to auto fit images.

Answer 1

You Need to get the $(window).

The window includes document. The window is the browser-screen, so the viewable area on screen, while document is your document. So the html page that is loaded into the browser, this can be smaller than your screen size.

Answer 2

If there is no fixed height for all the images, then use

$(window).load(function () {
    // your code goes here which will be executed once all the images 
   // got loaded (seen)
});

In case the height is fixed for all the images you are loading, then do not wait for the images to be loaded, just assign fixed height to <img> tags and fit them. Use

$(document).ready(function () {
    // your code goes here which will be executed once the DOM is ready 
    // (means all the tags including IMG tags) are loaded. 
});

Answer 3

I use window like this:

function resizeThings(){
var  winH = $(window).height();
var  winW = $(window).width();

// let's say you are trying to match images to height
 $('img').each(function(){
   $(this).css('height', winH); 
 });    

};