Static Image, Fluid Layout

Here’s a little trick that works nicely in modern browsers:

<img src="..." style="width:100%;max-width:000px;">

This image will now shrink to fit the width of the layout (width:100%) but won’t go wider than it’s own image size (max-width:000px where you replace 000 with the image’s pixel width).

Browsers should scale both X and Y even if only the X constraint (width) is set. In other words, only setting width and not height as well shouldn’t screw up the aspect ratio of the image.

The upside is images that won’t cause a fluid layout to break if the layout is narrowed to a width smaller than the image.

The downside is you can’t easily apply this rule globally. You have to either put the CSS inline for each image or you have to write a little javascript app that’ll go through every image of a with given class name, figures out the image’s max-width, and adds the max-width CSS rule on the fly.

I don’t like the javascript solution because it means a user who has it disabled will (potentially) get a broken layout. But maintaining a bunch of inline CSS is just tedious. So it’s something I’d say use, but use sparingly.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s