關于我們聯系我們網站地圖版權聲明收藏本站
JavaScript實現網頁圖片等比例縮放效果
http://www.wsjcw.com    2009-01-01    網站建設    我要評論(0)

在處理網頁圖片時,特別是一些圖片列表的應用里面,很難保證圖片統一大小,直接設置圖片大小又會導致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成后自動按比例調整圖片大小。

Javascript:

<script language="javascript" type="text/javascript"> 
<!-- 
// 說明:用 JavaScript 實現網頁圖片等比例縮放 
// 整理:http://www.CodeBit.cn 
function DrawImage(ImgD,FitWidth,FitHeight) 
{ 
var image=new Image(); 
image.src=ImgD.src; 
if(image.width>0 && image.height>0) 
{ 
if(image.width/image.height>= FitWidth/FitHeight) 
{ 
if(image.width>FitWidth) 
{ 
ImgD.width=FitWidth; 
ImgD.height=(image.height*FitWidth)/image.width; 
} 
else 
{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
else 
{ 
if(image.height>FitHeight) 
{ 
ImgD.height=FitHeight; 
ImgD.width=(image.width*FitHeight)/image.height; 
} 
else 
{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
} 
} 
//--> 
<script>

調用方式:

<ccid_file values="1148202890" alt="自動縮放后的效果"
onload="javascript:DrawImage(this,200,200);" / />

如果圖片較大,建議在圖片標簽里面同時設置期望的圖片大小,這樣不會導致頁面在加載中撐開,該大小不會影響最終縮放效果。可以修改上面的代碼為: 

<ccid_file values="1148202890" alt="自動縮放后的效果"
width="200" height="200" onload="javascript:DrawImage(this,200,200);" / />
來源:海南工商注冊代理網  相關專題:網站建設  閱讀:
已經是第一篇了 | 新一篇:[合法避稅咨詢]企業合理避稅案例分析
文章評論信息

已經有0人評論該文章! 查看所有評論

這里是評論的動作,做發表評論的錄入框

相關信息
服務指南

金龙棋牌官方app下载