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实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery插件实现轮播图效果
Oct 19 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 危险函数全解析
2009/09/09 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
Javascript 继承机制实例
2009/08/12 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
网游商务专员求职信
2013/10/15 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
作弊检讨书1000字
2014/02/01 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
刑事起诉书范文
2015/05/19 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
天鹅湖观后感
2015/06/09 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技