为了提升用户体验网站用户在上传图片的时候我们不能够让用户自己去处理图片以达到我们的要求
而通常像淘宝上商品实物展示这样的页面我们需要控制的主要是图片的宽度
又考虑到html页面解析顺序可能导致的一些问题决定通过定义一个简单的功能函数然后在img元素中添加onload事件来调用的方式进行实现代码如下
JS部分
<script type="text/javascript"> function changeImg(objImg) { var most = ; //设置最大宽度 if(objImgwidth > most) { var scaling = (objImgwidthmost)/objImgwidth; //计算缩小比例 objImgwidth = objImgwidth*scaling; objImgheight = objImgheight; //img元素没有设置高度时将自动等比例缩小 //objImgheight = objImgheight*scaling; //img元素设置高度时需进行等比例缩小 } } </script>
HTML调用部分
<img src="" onload="changeImg(this);" />