关于图片按比例自适应缩放的js代码


Posted in Javascript onOctober 30, 2011

如下图。

关于图片按比例自适应缩放的js代码

瞄了一下,居中可以用 text-align:center; 来实现。而按比例缩放,利用预设 <img /> 的 width 、height 属性解决不了。因为用户图片可能是很长的,也可能是很宽的。在线上想了一下他们的关系,按条件来判断是这样的:

if(实际宽度 > 预览最大宽度) { 
缩放宽度 = 预览最大宽度 
} if(实际高度 > 预览最大高度) { 
缩放高度 = 预览最大高度 
}

但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图片就不是按比例缩放,会变得非常丑。为了让它按比例缩放,就需要做各种判断了。那这样就违背了我们希望程序自动化的原则了。再想想,虽然不喜欢数学,但数学还是很好用的,应该有其他办法。而既然是按比例缩放,何不用实际图像和预览区域宽度作的比例来计算他们关系?hmmmm… 果然 OK。实际上我们永远都只需要缩放宽度或高度中的其中一个。因为比例只有大和小种情况。具体的,写一个函数来实现它吧:
/** 
* 图片按比例自适应缩放 
* @param img {Element} 用户上传的图片 
* @param maxWidth {Number} 预览区域的最大宽度 
* @param maxHeight {Number} 预览区域的最大高度 
*/ var resizeImg = function(img, maxWidth, maxHeight){ 
var w = img.width, 
h = img.height; 
// 当图片比预览区域小时不做任何改变 
if(w < maxWidth && h < maxHeight) return; 
// 当实际图片比例大于预览区域宽高比例时 
// 缩放图片宽度,反之缩放图片宽度 
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; 
};

完整的测试代码:
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>图片按比例自适应缩放</title> 
<style> 
.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;} 
</style> 
</head> 
<body> 
<div class="cnt"> 
<img id="img" src="http://www.wallcoo.com/1920x1440/1920x1440_nature_wallpapers_02/wallpapers/1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas005.jpg" alt="alipay" /> 
<br /> 
<a href="http://www.wallcoo.com/1920x1440/1920x1440_nature_wallpapers_02/wallpapers/1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas005.jpg" rel="nofollow">查看原图</a> || <a href="http://sofish.de/1679" title="关于图片按比例自适应缩放">返回文章:关于图片按比例自适应缩放 »</a> 
</div> 
<script> 
window.onload = function() { 
var img = document.getElementById('img'), 
/** 
* 图片按比例自适应缩放 
* @param img {Element} 用户上传的图片 
* @param maxWidth {Number} 预览区域的最大宽度 
* @param maxHeight {Number} 预览区域的最大高度 
*/ 
resizeImg = function(img, maxWidth, maxHeight){ 
var w = img.width, 
h = img.height; 
// 当图片比预览区域小时不做任何改变 
if(w < maxWidth && h < maxHeight) return; 
// 当实际图片比例大于预览区域宽高比例时 
// 缩放图片宽度,反之缩放图片宽度 
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; 
}; 
resizeImg(img, 500, 300); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
微信小程序选择图片控件
Jan 19 Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 #Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 #Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 #Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 #Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 #Javascript
基于jquery的无限级联下拉框js插件
Oct 29 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
javascript call和apply方法
2008/11/24 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
简单实现python聊天程序
2018/04/01 Python
python实现多张图片拼接成大图
2019/01/15 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python插件机制实现详解
2020/05/04 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
团日活动总结怎么写
2014/06/25 职场文书
2014年审计工作总结
2014/11/17 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
卫生主题班会
2015/08/14 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers