Today at work I had to figure out a way of scaling an image with CSS while maintaining the aspect ratio. “Not a big deal,” I thought. “That’s what max-height’s for!” Well I was half right.
CSS2 defines the max-height and max-width properties which essentially will scale an image to match its largest dimension to the appropriate property while maintaining the aspect ratio. IE6 didn’t support it, and a few bloggers erroneously jumped the gun and started reporting support in IE7 back when it was a beta. Turns out the feature did make it into the final release, but it happens to not support the img tag apparently. Genius.
The trick to getting it to work is an old one, but still works. Ultimately this was my CSS to make a 50px thumbnail out of whatever crazy-ass images people were trying to throw at Emma:
image.thumb { max-width: 50px; max-height: 50px; width: expression(this.width >= this.height && this.width > 50 ? 50 : true); height: expression(this.height >= this.width && this.height > 50 ? 50 : true); }
