We know that if the task of generating thumbnails is left to a program, the effect will be much better. However, sometimes due to certain factors, such as the server not supporting GD, it is inevitable to ask CSS to do it for you.
To scale down a large image to a certain size, for modern browsers, just use the max-width and max-height CSS properties.
For IE 6.0 and below, the above two CSS properties will be ignored. To deal with this kind of thing before, we often resorted to Javascript and then added onload events to the images. For example:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="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 certainly solve the problem, but it will cause trouble when upgrading future pages - as browsers improve their support for CSS, sooner or later we will remove all onload events from images. It's Expression's Show Time. Since IE supports placing some scripts in CSS through Expression, and this script is only available for IE 6.0 and below, it is perfect to write it into Expression.
Finally, to scale down a large image to within 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);
}
