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 StringBuilder类实现
Dec 22 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
8 个有用的JS技巧(推荐)
Jul 03 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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
mysql limit查询优化分析
2008/11/12 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JS重要知识点小结
2011/11/06 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
英文导游欢迎词
2014/01/11 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
拾金不昧表扬信
2015/01/16 职场文书
会议营销主持词
2015/07/03 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
angular异步验证器防抖实例详解
2022/03/31 Javascript