Last week I was finishing some code for a webshop. From the admin panel the user can add items with a thumbnail image. These thumbnails have a max-width(100) and max-height(100), because they are shown in a container of 280 x 280 px.

Example:

This is the css for the image:

.prodimg img{
 max-height:100px;
 max-width:100px;
 border:none;
 }

This CSS works perfectly on all ‘normal’ browsers. Except…. lte (lower dan or equal to) IE7. In IE the image is viewed in upload size. The max-width and max-height aren’t working correctly.

Put this in your style for IE to solve your max-witdh, max-height problem / bug:

.prodImg img{
 width: expression( document.body.clientWidth > 99 ? "100px" : "auto" ); /* sets max-width for IE */
 height: expression( this.scrollHeight > 99 ? "100px" : "auto" ); /* sets max-width for IE */
}

Just another IE irriation

If you are using a min-width and min-height like this:

.prodimg img{
 min-height:100px;
 min-width:100px;
 border:none;
 }

Use this expression:

.prodimg img{
 height: expression( this.scrollHeight < 101 ? "100px" : "auto" ); /* sets min-height for IE */
 width: expression( document.body.clientWidth < 101 ? "100px" : "auto" ); /* set min-width for IE */
 border:none;
}

Note:
Some images wil look a little unsharp, but the size is correct.