JS等比例缩小图片尺寸的实例

为了提升用户体验，网站用户在上传图片的时候，我们不能够让用户自己去处理图片以达到我们的要求。而通常像淘宝上商品实物展示这样的页面，我们需要控制的主要是图片的宽度。又考虑到html页面解析顺序可能导致的一些问题，决定通过定义一个简单的功能函数，然后在img元素中添加onload事件来调用的方式进行实现，代码如下： 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> HTML调用部分复制代码代码如下: <img src="" onload="changeImg(this);" />

　　推荐阅读

　　js批量设置样式的三种方法不推荐使用with

一般我们都用css来批量设置样式，现在我们用js也可以批量设置样式：总结三种方法如下复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档>>>详细阅读

本文标题：JS等比例缩小图片尺寸的实例

地址：http://www.17bianji.com/kaifa2/JS/22324.html

1/2 1