And Slaters Go Plop

The CSS property ‘max-width’ and ‘max-height’ doesn’t work in Internet Explorer 6. Here’s a workaround:

.myclass {
width:expression(this.width > 100 ? (this.height > this.width ? (this.width / this.height) * 100 : 100) : true);
}

What does this do? It executes a bit of javascript within the CSS that goes along the lines of “If the width is greater than 100 pixels then set the width to 100 – unless the height is greater than the width, in which case scale it down to the difference between the width and the height – otherwise just leave it as it is”.

This means that any element that is of .myclass will fit proportionately into a 100×100 area (change the 100 for whatever max-width or max-height you require).

I hope this saves someone from having to figure this out in the future.