JavaScript实现网页图片等比例缩放效果

goodluck

<p >在处理网页图片时，特别是一些图片列表的应用里面，很难保证图片统一大小，直接设置图片大小又会导致图片拉伸，造成图片模糊，本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。 <p >Javascript： <p ><p ><CENTER><ccid_nobr><table width="400" border="1" cellspacing="0" cellpadding="2"  bordercolorlight = "black" bordercolordark = "#FFFFFF" align="center"><tr><td bgcolor="e6e6e6" class="code" ><pre><ccid_code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt; &lt;!-- // 说明：用 JavaScript 实现网页图片等比例缩放 // 整理：http://www.CodeBit.cn function DrawImage(ImgD,FitWidth,FitHeight) { var image=new Image(); image.src=ImgD.src; if(image.width&gt;0 &amp;&amp; image.height&gt;0) { if(image.width/image.height&gt;= FitWidth/FitHeight) { if(image.width&gt;FitWidth) { ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; } else { ImgD.width=image.width; ImgD.height=image.height; } } else { if(image.height&gt;FitHeight) { ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; } else { ImgD.width=image.width; ImgD.height=image.height; } } } } //--&gt; &lt;script&gt;</ccid_code></pre></td></tr></table></ccid_nobr></CENTER><p ><p >调用方式： <p ><p ><CENTER><ccid_nobr><table width="400" border="1" cellspacing="0" cellpadding="2"  bordercolorlight = "black" bordercolordark = "#FFFFFF" align="center"><tr><td bgcolor="e6e6e6" class="code" ><pre><ccid_code>&lt;ccid_file values=&quot;1148202890&quot; alt=&quot;自动缩放后的效果&quot;onload=&quot;javascriptrawImage(this,200,200);&quot; / /&gt;</ccid_code></pre></td></tr></table></ccid_nobr></CENTER><p ><p >如果图片较大，建议在图片标签里面同时设置期望的图片大小，这样不会导致页面在加载中撑开，该大小不会影响最终缩放效果。可以修改上面的代码为： <p ><p ><CENTER><ccid_nobr><table width="400" border="1" cellspacing="0" cellpadding="2"  bordercolorlight = "black" bordercolordark = "#FFFFFF" align="center"><tr><td bgcolor="e6e6e6" class="code" ><pre><ccid_code>&lt;ccid_file values=&quot;1148202890&quot; alt=&quot;自动缩放后的效果&quot;width=&quot;200&quot; height=&quot;200&quot; onload=&quot;javascriptrawImage(this,200,200);&quot; / /&gt;</ccid_code></pre></td></tr></table></ccid_nobr></CENTER><p ><p >（责任编辑：董建伟）                                 <p align="center"></p></p>