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上传图片显示预览功能
Jun 29 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery插件实现轮播图效果
Oct 19 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
德生H-501的评价与改造
2021/03/02 无线电
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python ftp上传文件
2016/02/13 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
本科毕业自我鉴定
2014/03/20 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
大学生受助感言
2015/08/01 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书