JS实现控制图片显示大小的方法【图片等比例缩放功能】


Posted in Javascript onFebruary 18, 2017

本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片,按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
原图显示(534 X 800)<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 (400 X 512),此时高度不变,会自动按高度的比例压缩。<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 (300 X 600),此时宽度不变,会自动按宽度的比例压缩。<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)<br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="https://3water.com/" target="_blank"><img src="//img.jbzj.com/file_images/article/201702/2017218122006996.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br />
</body>
</html>

运行效果图如下:

JS实现控制图片显示大小的方法【图片等比例缩放功能】

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Express框架之connect-flash详解
May 31 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
JS实现数组去重复值的方法示例
Feb 18 #Javascript
bootstarp modal框居中显示的实现代码
Feb 18 #Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 #Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 #Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 #Javascript
JS设置时间无效问题的解决办法
Feb 18 #Javascript
js的OOP继承实现(必看篇)
Feb 18 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python实现控制台进度条功能
2016/01/04 Python
Django框架验证码用法实例分析
2019/05/10 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python中Yield的基本用法
2020/10/18 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
实习生自我鉴定
2013/12/12 职场文书
十八大宣传标语
2014/10/09 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Python实现批量自动整理文件
2022/03/16 Python