正文直接开始
在网页中放图片的时候我们经常会遇到图片变形的问题,今天给大家分享一个等比例压缩图片的js,可以设置最大宽高,然后等比例自动压缩。
<script type="text/javascript"> function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth ==0 && maxHeight==0){ Ratio = 1; }else if (maxWidth==0){ if (hRatio<1) Ratio = hRatio; }else if (maxHeight==0){ if (wRatio<1) Ratio = wRatio; }else if (wRatio<1 || hRatio<1){ Ratio = (wRatio<=hRatio?wRatio:hRatio); } if (Ratio<1){ w = w * Ratio; h = h * Ratio; } objImg.height = h; objImg.width = w; } </script>
在对应的img上增加onload=”AutoResizeImage(width,height,this)这句即可。
例如:
<img src="#" onload="AutoResizeImage(200,150,this)" alt="200 X 150"/>
转载请注明:Rockyxia Web技术博客 » JS控制图片显示的大小(图片等比例缩放)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。