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选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery实现广告上下滚动效果
Mar 04 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Element Input组件分析小结
2018/10/11 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python实现五子棋游戏
2019/06/18 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
理工科学生的自我评价
2013/12/15 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书