关于图片按比例自适应缩放的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 相关文章推荐
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JS实现音乐导航特效
Jan 06 Javascript
JS实现吸顶特效
Jan 08 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
第一个无线电台是由谁发明的
2021/03/01 无线电
生成静态页面的PHP类
2006/11/25 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js中less常用的方法小结
2017/08/09 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
消防应急演练方案
2014/02/12 职场文书
代办委托书怎样写
2014/04/08 职场文书
爱国口号
2014/06/19 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014年检验科工作总结
2014/11/22 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫