<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> auto proportional reduction of images and vertical center </title>
<! -- [If lte ie 6]>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function imgfix (){
// Define the width and height of the image to be restricted. The width and height must be the same as those defined in the style. images smaller than the width are not operated.
VaR widthrestriction = 90;
VaR heightrestriction = 90;
VaR allelements = Document. getelementsbytagname ('*')
For (VAR I = 0; I <allelements. length; I ++)
{
If (allelements [I]. classname. indexof ('imgbox')> = 0)
{
VaR imgelements = allelements [I]. getelementsbytagname ('img ');
For (var j = 0; j {
If (imgelements [J]. width> widthrestriction | imgelements [J]. Height> heightrestriction)
{
If (imgelements [J]. width> imgelements [J]. Height)
{
Imgelements [J]. Height = imgelements [J]. Height * (widthrestriction/imgelements [J]. width );
Imgelements [J]. width = widthrestriction;
} Else
{
Imgelements [J]. width = imgelements [J]. Width * (heightrestriction/imgelements [J]. Height );
Imgelements [J]. Height = heightrestriction;
}
}
If (imgelements [J]. height {
Imgelements [J]. style. paddingtop = (heightrestriction-imgelements [J]. Height)/2 + "PX ";
}
}/* For J */
}
}/* For I */
}
Window. onload = imgfix;
</SCRIPT>
<! [Endif] -->
<Style type = "text/CSS">
<! --
*{}{
Margin: 0;
Padding: 0;
}
. Imgbox Li {}{
List-style: none;
Width: 90px;/** // * width */
Height: 90px;/** // * height */
Background: # CCC;
Border: 1px solid #666;
Text-align: center;
Margin: 5px;
Line-Height: 90px;
}
. Imgbox IMG {}{
Max-width: 90px;/** // * width */
Max-Height: 90px;/** // * height */
Vertical-align: middle;
}
-->
</Style>
</Head>
<Body>
<Ul class = "imgbox">
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
</Ul>
</Body>
</Html>
CSS solution:
Max-width: 80px; max-Height: 80px; * _ width: expression (this. width> 80 & this. width> This. Height? 80: True); * _ Height: expression (this. Height> 80? 80: True );
