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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
js实现简单页面全屏
Sep 17 Javascript
Vue实现简易计算器
Feb 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
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
js输出列表实现代码
2010/09/12 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
办公室文书岗位职责
2013/12/16 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
国际贸易实训总结
2015/08/03 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB