<\img> as background cover.

When creating a responsive site, sometime we require a image to fit in a div. We can set max-width: 100%; OR width: 100%; with auto height for this. But when resize window image doesn't fit all the way in div. Image miss the height part of div to maintain aspect ratio (resize browser window and check first image). To solve this problem we can use background-size: cover; property in css. background size maintains the aspect ratio and cover div all the way (check second image). But We cannot use background in place of image. So Here is a tiny jquery function to make image behave like background cover in div. Thanks to http://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img#answer-11559652. To Use this, Select the image and call function. eg. $('.imgresize img').resizeToCover();

Comparison between these three approaches.

1. Using max-width: 100%; to image.

2. image as background on div.

3. Image resized to behave like background cover.

Resize Me