Stretch image to fill div, but not skew

Posted by z0mbieParade on Stack Overflow See other posts from Stack Overflow or by z0mbieParade
Published on 2012-06-30T01:38:20Z Indexed on 2012/06/30 3:16 UTC
Read the original article Hit count: 165

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css