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
This rocks, thanks so much for this!
Is there a way to do this with max-height as the baseline?
I don’t have time to try it out right now but you could try:
.myclass {
height:expression(this.height > 100 ? (this.width > this.height ? (this.height / this.width) * 100 : 100) : true);
}
Let me know if it works.
Thanks Damian, helpful!
I ended up using ur solution, plus I did a min-height thing to the container surrounding the image, so that at least the text etc.. under it are all uniform
thanks!
Cheers, glad it helped.