JQuery - resizing an image to fit a div

Question

I have divs that vary in height and width, and I want my images to be automatically resized to fill these divs 100%, and then, of course, centered.

My images are currently set to 100% wide and then using jQuery lower in the center, but this only works for images where the height is greater than the div size ever. How would I do it 100% for both heights and the width and center also .. completely filling the div (even if it means stretching the image)!

Thanks.

$('img.shelf-img').each(function(i, item) { var img_height = $(item).height(); var top_margin = -(img_height / 2); $(item).css({ 'top': '50%', 'margin-top': top_margin }); }); 

Answer 1

Use CSS to set the width and height of the image to 100%, and the image will automatically stretch to fill the containing div, without the need for jquery.

In addition, you will not need to center the image, as it will already be stretched to fill the div (in the center with zero margins).

HTML:

 <div id="containingDiv"> <img src=""> </div> 

CSS

 #containingDiv{ width: 200px; height: 100px; } #containingDiv img{ width: 100%; height: 100%; } 

Thus, if javascript is disabled for your users, the image will be stretched to fill the entire width / height of the div.

OR

JQuery path (SHRINK / STRETCH TO FIT - INCLUDES WHITESPACE):

 $('img.shelf-img').each(function(i, item) { var img_height = $(item).height(); var div_height = $(item).parent().height(); if(img_height<div_height){ //IMAGE IS SHORTER THAN CONTAINER HEIGHT - CENTER IT VERTICALLY var newMargin = (div_height-img_height)/2+'px'; $(item).css({'margin-top': newMargin }); }else if(img_height>div_height){ //IMAGE IS GREATER THAN CONTAINER HEIGHT - REDUCE HEIGHT TO CONTAINER MAX - SET WIDTH TO AUTO $(item).css({'width': 'auto', 'height': '100%'}); //CENTER IT HORIZONTALLY var img_width = $(item).width(); var div_width = $(item).parent().width(); var newMargin = (div_width-img_width)/2+'px'; $(item).css({'margin-left': newMargin}); } }); 

JQuery path - CROP TO FIT (without WHITESPACE):

 $('img.shelf-img').each(function(i, item) { var img_height = $(item).height(); var div_height = $(item).parent().height(); if(img_height<div_height){ //INCREASE HEIGHT OF IMAGE TO MATCH CONTAINER $(item).css({'width': 'auto', 'height': div_height }); //GET THE NEW WIDTH AFTER RESIZE var img_width = $(item).width(); //GET THE PARENT WIDTH var div_width = $(item).parent().width(); //GET THE NEW HORIZONTAL MARGIN var newMargin = (div_width-img_width)/2+'px'; //SET THE NEW HORIZONTAL MARGIN (EXCESS IMAGE WIDTH IS CROPPED) $(item).css({'margin-left': newMargin }); }else{ //CENTER IT VERTICALLY (EXCESS IMAGE HEIGHT IS CROPPED) var newMargin = (div_height-img_height)/2+'px'; $(item).css({'margin-top': newMargin}); } }); 

Answer 2

If you want to keep the image ratio, I would set max-height and max-width to 100%. Here is an example to show how this works. This will effectively reduce images larger than the div, but it will keep the aspect ratio.

For images that are smaller than a div, you will have to scale with JavaScript. The basic algorithm looks like this:

• Find the aspect ratio of the image (width / height)
• Find the aspect ratio of the div (width / height)
• If the aspect ratio of the image is smaller than the div, set the image height to 100%
• If the aspect ratio of the image is greater than the div, set the image width to 100%
• No matter what size is set, set it to auto

Obviously, you can use this algorithm to scale up or down, but if you are guaranteed that your div will always be smaller than your image, you can use a simpler CSS solution.

It looks like you have the centering code, so I'll leave it to you.