Max Width and Max Height for Images

Problem

Haven't you always wanted to have an IMG tag where you could specify the maximum width and height, such that the image would draw it's correct size if it were smaller than those limits? But if it were larger in either dimension (or both), it would be scaled down to fit your specified limits, while maintaining proper aspect ratio?

With basic HTML, it can't be done. Oh sure, you can specify just one of WIDTH or HEIGHT in the IMG tag, and if the image is too large in that dimension only, it will scale down (maintaining the same aspect ratio) to fit your requirement. But this method doesn't allow you to specify maximums for both width and height without messing up the aspect ratio of the image!

I just want to say "fit this image into a 400px X 400px area without making it look weird."

Solution, Sort Of

The W3C created CSS settings to do this years ago:

.mainimage {
  max-width: 400px;
  max-height: 400px;
} 

This works great in Firefox 3, Safari, Opera, and even Google's new Chrome browser. But it doesn't work in Microsoft IE6 or IE7!

I can't believe Microsoft STILL has not made their browsers standards-compliant for simple things like max-width and max-height. It's a crime against computermanity. :)

Solution That Works For All Browsers

It turns out there's a way of doing the equivalent of max-width and max-height for IE browsers. If you use the following style, it will work on all browsers:

.mainimage {
  max-width: 400px;
  max-height: 400px;
  width: expression(this.width > 400 ? "400px" : true);
  height: expression(this.height > 400 ? "400px" : true);
}

Then you just use that style with an image, for example:

<img class="mainimage" src="<?=$pictureurl?>" border=0>

Microsoft web browsers understand the Microsoft-only, non-standard "expression" element inside CSS. The part inside parentheses must be a Javascript expression yielding the string that should be used in place of the expression() portion. No other web browsers understand it, which is good for our situation - we can check and set the width and height elements of our image with it, just for Microsoft browsers.

One Caveat

If you try to use expression() on a static string, it will not work. Don't ask me why. It's as if something that simple is not seen as an expression, to Microsoft's implementation of Javascript. It makes no sense to me.

The following would not work for me in IE6 or IE7:

width: expression("400px");

I had to change it like this:

width: expression(400 + "px");

And then it worked. Just keep that in mind if you play with this much.

Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:

Privacy Policy

See other tricks:  Web/PHP | Unix/Linux | Perl | SQL | General