.mainimage { max-width: 400px; max-height: 400px; } |
I can't believe Microsoft STILL has not made their browsers standards-compliant for simple things like max-width and max-height.
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:
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.
.mainimage { max-width: 400px; max-height: 400px; width: expression(this.width > 400 ? "400px" : true); height: expression(this.height > 400 ? "400px" : true); } |