Using CSS to scale images
December 12th, 2007
Typically you wouldn’t want to do this but if you ever have the need… well, here ya’ go.
The styles max-width and max-height work for images. Just create a style as follows:
.resize400
{
max-width: 400px;
max-height: 400px;
}
Note that the code will only work in Mozilla > 1.5 and IE > 7.0. To make it work in IE 6.0, use a selector and modify the style as follows:
.resize400
{
max-width: 400px;
max-height: 400px;
width: expression(this.width > 400 ? 400 : true);
height: expression(this.height> 400 ? 400 : true);
}
I take no responsibility for how ugly this will make your images. And forgive the formatting. I’m fighting with WP at the moment and it seems to be winning.