電  話:0432-64798819

傳  真:

聯 系 人:技術部

手  機:0432-64798819

郵  箱:

您現在的位置:吉林市東訊科技網絡公司 >> 新聞動態 >> 建站知識建站知識

圖片自動按比例縮小并上下居中,兼容各瀏覽器

文章來源:吉林市網絡公司    發布時間:2013-11-27   瀏覽次數: 4987

圖片自動按比例縮小并上下居中,兼容各瀏覽器,并適合用到各大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>

------分隔線----------------------------

上一篇:打造網絡營銷的高端站點的5大步驟!

下一篇:網站有哪些因素可以體現企業形象?

版權所有: 吉林市東訊科技網絡公司 技術支持:吉林市東訊科技

公司地址: 吉林市船營區松江中路93號玖和財富一樓 咨詢電話:0432-64798819 聯系人:技術部

3d2014年开奖号走势图带连线