js、css等比例缩小

<! 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 > 图片自动等比例缩小且垂直居中 </ title >  
<!-- [if lte IE 6]> 
<script type="text/javascript" language="javascript"> 
function imgFix() { 
  //定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作 
  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 < 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:90px;  /**//* 宽度 */ 
height:90px; /**//* 高度 */ 
background:#ccc; 
border:1px solid #666; 
text-align:center; 
margin:5px; 
line-height:90px; 
} 
.imgBox img {}{ 
max-width:90px;  /**//* 宽度 */ 
max-height:90px; /**//* 高度 */ 
vertical-align:middle; 
} 
--> 
</ style >  
</ head >  

< body >  
< ul  class ="imgBox" >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget111.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget112.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget113.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget114.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget1.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget2.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget3.jpg"  alt ="img"   /></ li >  
   < li >< img  src ="http://192.168.1.103/hibeans/web/images/temporary/imgget4.jpg"  alt ="img"   /></ li >
</ ul >  
</ body >  
</ html >

 

css 解决方法：

 

max-width:80px; max-height:80px;  *_width: expression(this.width > 80 && this.width > this.height ? 80 : true); *_height: expression(this.height > 80 ? 80 : true);