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 清空form表单中某种元素的值
Dec 26 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vuex的简单使用教程
Feb 02 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
表单内同名元素的控制
2006/11/22 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
js操作二进制数据方法
2018/03/03 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
领导证婚人证婚词
2014/01/13 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
妈妈活动方案
2014/08/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
安全生产月宣传标语
2014/10/06 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019年大学推荐信
2019/06/24 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
python实现双链表
2022/05/25 Python