Wolf’s Little Store

Sometimes you want to specify a maximum width images should be, mostly to prevent them from overflowing out of the content area of your website. Maybe you don’t want to resize your images - or your client doesn’t have a clue how to use an image editor. In any case, this is the code you need:

img {
	max-width: 525px;
	/* Change 525 to the desired width value */
}

img {
	_width: expression(this.width > 525 ? 525: true);
	/* IE6 fix for max-width */
	/* Change both 525s to the desired width value */
}

Some notes:

• It’s a good idea to specify something along the lines of #content img instead of just img, since other images on the website might be wider.
• It’s a much better idea to resize images before uploading, or resize the images when uploaded through tools like PHPThumb.
• It’s also recommended to remove the underscore hack and place the second statement in your conditional comments for IE6.
• IE expressions ignore media types, so use with caution.

• Category: tips 'n tricks
• Back to the overview