<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> picture automatic proportional reduction and vertical center-www.jb51.net </title>
<!--[If LTE IE 6]>
<script type= "Text/javascript" language= "JavaScript" >
function Imgfix () {
Define the width of the picture that you want to limit, this wide Gaoyao is the same as the style definition, less than the defined high width of the picture does not operate
var widthrestriction = 200;
var heightrestriction = 200;
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 < Imgelements.length; 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 < heightrestriction)
{
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:200px; /* Width * *
height:200px; /* Height *
Background: #ccc;
border:1px solid #666;
Text-align:center;
margin:5px;
line-height:200px;
}
. imgbox img {
max-width:200px; /* Width * *
max-height:200px; /* Height *
Vertical-align:middle;
}
-->
</style>
<body>
<ul class= "Imgbox" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
