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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
小结Python的反射机制
2020/09/28 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
开业典礼主持词
2014/03/21 职场文书
农村葬礼主持词
2014/03/31 职场文书
团队精神的演讲稿
2014/05/14 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL