图片自动按比例缩小并上下居中,兼容各浏览器,并适合用到各大CMS系统(龙8dede,龙8,帝国等等)中
<!--[if lte IE 6]-->
<script type="text/javascript" language="javascript">
function imgFix() {
//龙8[要限制的图片宽高,这个宽高要同style里面龙8[的相同,高或宽小于限定高宽的图片保持原尺寸
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) //获取class名称
{
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">
<!--
.imgBox li {
width:200px; /* 宽度 */
height:200px; /* 高度 */
overflow:hidden;
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
}
.imgBox img {
vertical-align:middle;
}
-->
</style>
<div><ul class="imgBox">
<li><img src="......" alt="yourimg" /></li>
</ul> </div>