Web Standard learning: Using CSS to reduce the image of the same scale skills

css| Standard | skills | Web page

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:

<script type= "Text/javascript" >
Functionresizeimage (obj) {
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>

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>50&&this.width>this.height?50:auto);
Height:expresion (This.height>50?50:auto);
}