Web standardization: Using CSS to zoom in on a picture

Css|web|web Standard

Of course, to generate thumbnails of this work if the program to complete, the effect will be much better, but sometimes for some reason, such as the server does not support GD and so on, it is inevitable to ask for CSS.

To reduce a large picture proportionally to a certain size, for modern browsers, use the Max-width and max-height two CSS properties directly.

For IE 6.0 and the following version, the above two CSS properties will not be ignored. Before dealing with this sort of thing, we tend to use JavaScript and then add the OnLoad event to the picture. For example:

This can solve the problem, but for the next page upgrade will bring trouble-with the browser to the CSS support, we will sooner or later the OnLoad event on the picture removed. It's time for expression's show, and since IE supports placing scripts in CSS via expression, and this script is only available to IE 6.0 and the following versions, it would be appropriate to write it in expression.

Finally, a pair of large pictures in proportion to 50px*50px, you can refer to the following CSS:

. thumbimage {
max-width:50px;
max-height:50px;
}
* HTML. Thumbimage {
Width:expression (This.width > && this.width > This.height 50:auto);
Height:expresion (This.height > 50:auto);
}

As for how the picture maintains its high and wide proportions, this picture can explain: