In recent thread over at the SitePoint forums, someone asked how to have any sized image fit nicely into the viewport while maintaining its aspect ratio. The assumption is that all the content can fit in the viewport and no scrollbars are needed. While CSS is wonderful and magical, it doesn't know the sizes of images and let us play with them to pixel perfection, so we must turn to good old JavaScript to maintain aspect ratio.

This is a very large photo I took of a mountain near Choquequirao, Peru. Figure 1 shows it set as a normal background image without playing with CSS's background-position or anything else and only a rather boring corner of it (not that the whole image is that exciting either) is visible:

Figure 1

Figure 2 shows the same thing, except that the image has been centred using background-position:center:

Figure 2

It's even more boring! Now, with CSS we can still improve this a bit, by using the img element instead of a background image. Yes, this is not as beautifully semantic, but for the purposes of this example will do:

By setting the width and height of #bg and the image to 100%, we can fill the viewport up with the image, but of course the aspect ratio of the image will not be maintained and the stretchiness can look horrible, particularly if the browser window is resized.

Time for some JavaScript, then. The first thing to do is to make sure the image has actually loaded before we try to resize it. I've decided on the following approach:

The key thing here is that we first set an onload event listener on bgimg (the image we're resizing) which will fire when the image has finished loading. However, it will only fire if the src attribute is set, so we do that in the following line (it doesn't matter that it's the same src, fortunately).

The last three lines fire resizeBg when the browser window is resized and cater for decent browsers and IE. Here is resizeBg:

The first two lines obtain the width and height of the viewport. There is a small caveat here: For document.documentElement.clientWidth to work (since IE does not support self.innerX), IE must not be in quirks mode, i.e. the page must have a valid doctype. Not much of a caveat, really, since your pages should have valid doctypes anyway.

Following that, we just employ some simple mathematics. The first if block will set any image to the same width as the viewport. It also works out the new height for the image so that the aspect ratio is preserved.

The next if-else block is important. If the first block's calculations means that the new image's height is smaller than the viewport, we need to make it a bit bigger. This means setting the width to bigger than the viewport, so to preserve the aspect ratio, we centre it by shifting it left by half the difference.

If the height of the new image is bigger, then we need to centre it vertically, which is what the else if bit does.

Now, as shown in Figure 3, we can get a nicely-fitting centred image as the background!

Figure 3

See the finished example page (which Figure 3 links to too) and the accompanying JavaScript file. The JavaScript file includes code to run the resizing function when the DOM has loaded, using Dean Edwards' script, so the init function will look a little different to the one on this page.

Before anyone says anything, yes, the script could be made truly nice and unobtrusive by creating the HTML elements for the background image with JavaScript as well, but that is not the focus of this post, so it can be left as an exercise for the reader!

Update (29/01/09): I've updated the code to make the script work in IE6. Please note there are also changes to the CSS (in the finished example HTML file).