JavaScript等比例縮放圖片控制超出範圍的圖片_javascript技巧

js等比例縮放圖片，這個功能非常實用，當網頁加載一個尺寸比較大的圖片時，往往會把一個網頁撐的變形，頁面變得很難看，於是我們就想到了用JS去控制超出一定範圍的圖片，腳本之家以穩定頁面佈局，本程式碼片段就是完成了此功能，而且程式碼非常簡潔，效果很好。

複製程式碼 程式碼如下:

<script>function <BR>DrawImage(ImgD,iwidth,iheight){ //參數(圖片,允許的寬度,允許的高度) <BR>var <BR>image=new Image(); image .src=ImgD.src; <BR>if(image.width>0 <BR>&& image.height>0){ if(image.width/image.height>= <BR>iwidth/iheight){ if(image .width>iwidth){ <BR>ImgD.width=iwidth; <BR>ImgD.height=(image.height*iwidth)/image.width; <BR>}else{ <BR>ImgD.width=age.widwid ; <BR>ImgD.height=image.height; <BR>} <BR>}else{ <BR>if(image.height>iheight){ <BR>ImgD.height=iheight; <BR>ImgD.width (image.width*iheight)/image.height; <BR>}else{ <BR>ImgD.width=image.width; <BR>ImgD.height=image.height; <BR>} <BR>} <BR>} <BR>} <BR>} <br></script>
src=http://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="JavaScript等比例縮放圖片控制超出範圍的圖片_javascript技巧"

width="100"

style="max-width:90%"

onload="javascript：DrawImage(this,80 ,80)"

/>