js、css等比例缩小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>图片自动等比例缩小且垂直居中</title>

<!--[if lte IE 6]>

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]-->

<!--

* {

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>

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