经典案例
  • 阳春市森百丽家具厂
  • 欧中商务中心
  • 乐滚乐滚品牌
  • 广东省阳春市人民医院改版
  • yingzhicrafts.com
  • 觅思有文化传播有限公司
  • ArtsRouge
  • 香港·维西·创意设计机构
  • 龍大品牌设计有限公司

图片自动按比例缩小并上下居中,兼容各浏览器

发布于:2012-09-17 23:12来源:杏彩彩票首页 作者:e点人 点击:

图片自动按比例缩小并上下居中,兼容各浏览器,并适合用到各大CMS系统(织梦dede,科汛,帝国等等)中

<!--[if lte IE 6]--> 
<script type="text/javascript" language="javascript"> 
function imgFix() { 
//定义要限制的图片宽高,这个宽高要同style里面定义的相同,高或宽小于限定高宽的图片保持原尺寸

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>

tag标签:
------分隔线----------------------------
------分隔线----------------------------