关于图片按比例自适应缩放的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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
使用javascript访问XML数据的实例
Dec 27 Javascript
Prototype使用指南之array.js
Jan 10 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
switchery按钮的使用方法
Dec 18 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python机器学习之神经网络(二)
2017/12/20 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python如何进行时间处理
2020/08/06 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
值传递还是引用传递
2015/02/08 面试题
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书