Script of the Day: MaxImage

MaxImage is a jQuery plugin for properly showing images on a page's background, or even running a fully-fledged slideshow as well.

As any developer has noticed, showing an image in the page's background is not as easy as it sounds. If the image varies in size, some whitespace might make its way to one of its sides. Also, when resizing the browser window, the image never scales and always stays in its original size.

While CSS 3 has come to the aid of developers running full image backgrounds with the “background-size: cover” setting, it does not quite produce the same effect on all viewport sizes.

MaxImage comes in to fill all those gaps. The plugin makes sure that the image is always fitted inside the active page background so it never leaves white spaces anywhere.

It also recalculates the viewport dimensions whenever the browser window is modified, dynamically resizing the image in real time, at a smaller or bigger scale, so it perfectly fits inside the new window at an acceptable aspect ratio.

To experience the effect first hand, check out MaxImage's demo. Its source code and examples are hosted on GitHub.

Download MaxImage from our Scripts section here.
Check out more MaxImage screenshots here.

Via: Script of the Day: MaxImage