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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php教程之phpize使用方法
2014/02/12 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
jQuery动态添加
2016/04/07 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
Python 备份程序代码实现
2017/03/06 Python
python 常用的基础函数
2018/07/10 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
工作决心书
2014/03/11 职场文书
伊琍体标语
2014/06/25 职场文书
群众路线调研报告范文
2014/11/03 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
雷锋的观后感
2015/06/10 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android