Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 js等比例缩小图片尺寸的例子

js等比例缩小图片尺寸的例子

发布时间:2015-07-05   编辑:www.jquerycn.cn
本文介绍了js等比例缩小图片尺寸的方法,用js实现图片尺寸的等比例缩小,图片等比例缩放的实现方法,有需要的朋友参考下。

有时需要控制图片的宽度,考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,就会用图片等比例缩放的js代码。
考虑用js实现等比例缩小图片的尺寸。
1,js部分
 

复制代码 代码示例:

<script type="text/javascript">
 function changeimg(objimg)
 {
     var most = 690; //设置最大宽度
     if(objimg.width > most)
     {
         var scaling = 1-(objimg.width-most)/objimg.width;   
         //计算缩小比例
         objimg.width = objimg.width*scaling;
         objimg.height = objimg.height; //img元素没有设置高度时将自动等比例缩小

         //objimg.height = objimg.height*scaling; //img元素设置高度时需进行等比例缩小
     }

 }
 </script>

2,html调用部分
 

复制代码 代码示例:
<img src="" onload="changeimg(this);" />

您可能感兴趣的文章:
等比例缩小图片尺寸的js代码
js等比例缩小图片尺寸的例子
Js 图片等比例缩小的实现代码
php图片等比例放大与缩小的方法举例
jQuery动态改变图片显示大小(示例代码)
autoIMG 基于jquery的图片自适应插件代码
PHPThumb图片处理类示例
jcrop基本参数一览
css3背景图片全屏显示的例子
PHPThumb图片处理实例解析

[关闭]