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);
