CSS max-width proportional scaling in IE6
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.
Tags: css, ie6sux, javascript, max-height, max-width, proportion, scaling
