How do I make images flexible height and width?

This is easy stuff.

img { max-width:100%; }

This idea was originally experimented on by Richard Rutter has proven to be very helpful, well for me at least. Basically, an image will load in at 100% of the browser width, unless the browser width is smaller than the image, in which case it loads in at the max-width of the browser. Fluid images!

Unfortunately not supported in IE but I believe appending targeted IE code will work out fine.

img {
    max-width:100%;
    *width: 100%;
}

I’ve used this code on my home page light box to view large images of my work here – try resizing your browser.

Back to Blog

Say Hello

You can reach me by email, I'd love to hear from you.