jQuery实现按比例缩放图片的方法


Posted in jQuery onApril 29, 2017

本文实例讲述了jQuery实现按比例缩放图片的方法。分享给大家供大家参考,具体如下:

做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样。在这里我介绍一种简单的按比例缩放图片的方法。

对于一堆图片

<img src="1.jpg" border="1"></img>
<img src="2.jpg" border="1"></img>

应用下面的JavaScript代码

<SCRIPT LANGUAGE="JavaScript">
function setImg(img,width,height){
  var scale_w=img.width/width;
  var scale_h=img.height/height;
  var scale=scale_w>scale_h?scale_w:scale_h;
  img.width=img.width/scale;
  return false;
}
</SCRIPT>

然后使用如下的jQuery语句即可

<script type="text/javascript">
$(document).ready(function(){
    $("img").each(function(){
    setImg(this,200,200);
  });
});
</script>

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

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
You might like
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP导入导出Excel代码
2015/07/07 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP会话控制实例分析
2016/12/24 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
详解python单元测试框架unittest
2018/07/02 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
学习python可以干什么
2019/02/26 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python函数参数分类原理详解
2020/05/28 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
生物制药专业求职信
2014/03/11 职场文书
中药专业自荐信范文
2014/03/18 职场文书
学雷锋日活动总结
2015/02/06 职场文书
刑事撤诉申请书
2015/05/18 职场文书