JavaScript限定图片显示大小的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了JavaScript限定图片显示大小的方法。分享给大家供大家参考。具体实现方法如下:

/**
 * 限制图片显示的size.
 * 
 * @param thisobj 图片组件
 * @param limitW 限制宽度大小
 * @param limitH 限制高度大小
 */
function imageResize(thisobj, limitW, limitH) {
  var newW;
  var newH;
  if (thisobj.width > limitW) {
    newW = limitW;
    newH = parseInt(thisobj.height * newW / thisobj.width);
 // 按宽度比例缩放
    if (newH > limitH) {
      newH = limitH;
      newW = parseInt(thisobj.width * newH / thisobj.height);
    }
    thisobj.width = newW;
    thisobj.height = newH;
  } else if (thisobj.height > limitH) {
    newH = limitH;
    newW = parseInt(thisobj.width * newH / thisobj.height);
    thisobj.width = newW;
    thisobj.height = newH;
  }
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 #Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 #Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 #Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 #Javascript
javascript与css3动画结合使用小结
Mar 11 #Javascript
jquery实现textarea 高度自适应
Mar 11 #Javascript
jQuery简单实现禁用右键菜单
Mar 10 #Javascript
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Django中Model的使用方法教程
2018/03/07 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Django模板Templates使用方法详解
2019/07/19 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
学python爬虫能做什么
2020/07/29 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
区域销售经理职责
2013/12/22 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
租房协议书范例
2014/10/14 职场文书
任命书格式模板
2015/09/22 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js