关于图片按比例自适应缩放的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 相关文章推荐
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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
桌面中心(三)修改数据库
2006/10/09 PHP
一个简单的域名注册情况查询程序
2006/10/09 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php生成zip文件类实例
2015/04/07 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
jQuery下的动画处理总结
2013/10/10 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
结构和类有什么异同
2012/07/16 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
《乞巧》教学反思
2014/02/27 职场文书
汇源肾宝广告词
2014/03/20 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
应聘教师求职信
2014/07/19 职场文书
捐书活动倡议书
2015/04/27 职场文书