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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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实现文件上传二法
2006/10/09 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
详解Python_shutil模块
2019/03/15 Python
简单了解django orm中介模型
2019/07/30 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
Delphi工程师笔试题
2013/09/21 面试题
大学生英语演讲稿
2014/04/24 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
甜品店创业计划书
2014/08/14 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js