Auto image resize based on browser window dimensions

Question

I have a basic web page layout with a 100% width header and a sticky footer. In between the two I have a large graphic.

I would like the graphic to resize dynamicall

Answer 1

If you're willing to rely on CSS3 and display your image as a background in an element, consider using background-size. Going this route allows you to resize the image while preserving its aspect ratio.

Here's a quick example of background-size.

This can of course be done manually if you monitor the window size using JS and resize accordingly. If you are interested in going this route, let us know. I would advocate using a pure CSS solution for something so trivial, if possible, so you don't alienate users with JS disabled.