Standardized web production: scale down images with CSS

Of course, it will be much better to generate a thumbnail if it is handed over to the program. But sometimes, for some reason, for example, if the server does not support GD, CSS will inevitably be required.
Scale down a large image to a specific size. For modern browsers, use the max-width and max-height CSS attributes.
For IE 6.0 and earlier versions, the above two CSS attributes will not be ignored. Previously, we often used Javascript to handle such a problem and then added the onload event to the image. For example:

The code is as follows:	Copy code
<Script type = "text/javascript"> Function resizeImage (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 it will be troublesome to upgrade the page in the future. With the improvement of the CSS support of the browser, we will delete all the onload events on the image sooner or later. This is the Show Time of Expression. Since IE supports placing some scripts in CSS through Expression, this script is only available for IE 6.0 and later versions, therefore, writing it to Expression is not appropriate.
In the end, scale down a large image to 50px * 50px in proportion. You can refer to the following section of CSS:

The code is as follows:	Copy code
. 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 ); }

As for how the image maintains its aspect ratio, this image can be explained as follows: