Question

I’m trying to make an image stretch to fit inside a div. However I want it to overflow so that the entire div is filled. The div resizes with the page. I want an effect similar to the jQuery bgstretcher plugin (http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html) , but I cannot use that plugin because I’m already using it for the background image on the page, and it seems to not work when you try and activate multiple instances of it.

So what I’m asking is for some sort of simple jQuery function that resizes an image to completely fill a div with overflow hidden, so that there are no gaps, but without skewing the image.

Edit:

http://jsfiddle.net/R7UCZ/

That’s sort of what I’m after, but I want the image to fill the entire div without skewing. If the image goes out of the div a bit, that’s fine, but I need it to resize with the div, which resizes with the page, both height and width.

Answer 1

First you need to get the image properties and see which one is larger, the height or the width, then resize the image based on the div size after the window resizes, like this:

  //this would load up initially, you will need this data for future processing


   div = $("div");
   imgsrc = div.find('img').attr('src');

   var img = new Image()
   img.onload = function(){
        imgw = img.width;
        imgh = img.height;

        //after its loaded and you got the size..
        //you need to call it the first time of course here and make it visible:

        resizeMyImg(imgw,imgh);
        div.find('img').show();

        //now you can use your resize function
        $(window).resize(function(){ resizeMyImg(imgw,imgh) });

        }
   img.src = imgsrc


   function resizeMyImg(w,h){     
      //the width is larger
      if (w > h) {
        //resize the image to the div
        div.find('img').width(div.innerWidth() + 'px').height('auto');
      }        
      else {
        // the height is larger or the same
        //resize the image to the div
        div.find('img').height(div.innerHeight() + 'px').width('auto');
      }

     }

You can actually find a complete solution here:
http://jsfiddle.net/CDywS/1