首页 > PHP资讯 > HTML5培训技术 > JS实现控制图片显示大小的方法【图片等比例缩放功能】

JS实现控制图片显示大小的方法【图片等比例缩放功能】

HTML5培训技术
这篇文章主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下

本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考,具体如下:


最新javascript自动按比例显示图片,按比例压缩图片显示<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》
原图显示(534 X 800)
onload="AutoResizeImage(0,0,this)



运行效果图如下:

更多JS实现控制图片显示大小的方法【图片等比例缩放功能】相关文章请关注PHP中文网!

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持26不支持0