JS等比例缩小图片尺寸的实例
更新时间：2013年02月27日 14:15:42 作者：
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);" />
相关文章
这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
JavaScript中，除了五种原始类型（即数字，字符串，布尔值，null，undefined）之外的都是对象了，所以，不把对象学明白怎么继续往下学习呢？本篇文章给大家分享javascript对象深入学习总结，小伙伴们跟着小编一起深入学习吧2015-09-09
这篇文章主要介绍了JS判断元素是否在数组内的实现代码,需要的朋友可以参考下2016-03-03
防抖和节流函数是工作中两种常用的前端性能优化函数,今天我就来总结一下什么是防抖和节流,并详细说明一下如何在工作中应用防抖和节流函数,需要的朋友可以参考下2023-08-08
Javascript & DHTML DOM基础和基本API
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。2008-07-07
这篇文章主要为大家介绍了全解跨域请求问题处理方法及分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-07-07
微信小程序webview与h5通过postMessage实现实时通讯的实现
这篇文章主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
JavaScript使用addEventListener添加事件监听用法实例
这篇文章主要介绍了JavaScript使用addEventListener添加事件监听的方法,实例分析了addEventListener方法的相关使用技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护，联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，交叉类型就是需要满足所有类型，交叉类型使用，更多内容我们来看看下面文章详细内容吧2021-12-12
这篇文章主要介绍了webpack 从指定入口文件中提取公共文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论