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 相关文章推荐
js给dropdownlist添加选项的小例子
Mar 04 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP中其实也可以用方法链
2011/11/10 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
js转html实体的方法
2016/09/27 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
详解VUE 数组更新
2017/12/16 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
Python中装饰器高级用法详解
2017/12/25 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
团组织关系介绍信
2014/01/12 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers