关于图片按比例自适应缩放的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 function、指针及内置对象
Feb 19 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
原生js实现回复评论功能
Jan 18 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
什么是短波收听SWL
2021/03/01 无线电
PHP原理之异常机制深入分析
2010/08/08 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
用python做游戏的细节详解
2019/06/25 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python 发送邮件方法总结
2020/08/10 Python
如何使用Pytorch搭建模型
2020/10/26 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
党校培训自我鉴定
2014/02/01 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
合伙经营协议书范本
2014/09/13 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
golang 语言中错误处理机制
2021/08/30 Golang