JavaScript scales images proportionally to control images that are out of range_javascript skills

js scales images proportionally. This function is very practical. When a web page loads a relatively large image, it will often deform the web page and make the page ugly. So we thought of using JS to control the image beyond a certain range. Picture, Script House stabilizes the page layout. This code snippet completes this function, and the code is very concise and the effect is very good.

Copy code The code is as follows:

<script>function <br>DrawImage(ImgD,iwidth,iheight){ //Parameters (image, allowed width, allowed height) <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=image.width; <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></script>
src=http://www.jb51.net/uploadfile /2013/0803/20130803034531502.jpg"
alt="The effect after automatic scaling"

width="100"

height="100"

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

/>