首頁 > 開發者 > JavaScript
標籤：
javascript圖片等比例縮放代碼:
圖片的尺寸在初始的狀態下往往不能夠完美的適應網頁的布局，這個時候就需要對圖片進行縮放處理，當然不能夠是無規則的進行縮放，否則可能出現圖片變形現象，下面是一段能夠對圖片進行等比例縮放的執行個體代碼。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /><title>圖片等比例縮放代碼-螞蟻部落</title><script type="text/javascript">//參數(圖片,允許的寬度,允許的高度) function DrawImage(ImgD,iwidth,iheight){ var image=new Image(); image.src=ImgD.src; if(image.width>0&& image.height>0){ if(image.width/image.height>=iwidth/iheight){ if(image.width>iwidth){ ImgD.width=iwidth; ImgD.height=(image.height*iwidth)/image.width; } else{ ImgD.width=image.width; ImgD.height=image.height; } } else{ if(image.height>iheight){ ImgD.height=iheight; ImgD.width=(image.width*iheight)/image.height; } else{ ImgD.width=image.width; ImgD.height=image.height; } } } } window.onload=function(){ var theimage=document.getElementById("theimage"); DrawImage(theimage,80,80)}</script></head><body><img src="theimg.jpg" alt="自動縮放後的效果" id="theimage"/></body></html>
以上代碼實現了圖片等比例縮放效果，直接套用就可以了。
原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/1994.html
最為原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8543
javascript圖片等比例縮放代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
