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实现全选、全不选以及单选功能
Mar 23 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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/07/08 PHP
用Zend Encode编写开发PHP程序
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
PyQt5 多窗口连接实例
2019/06/19 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
学python最电脑配置有要求么
2020/07/05 Python
python中最小二乘法详细讲解
2021/02/19 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
PHP开发的一般流程
2013/08/13 面试题
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
简历自我评价模板
2015/03/11 职场文书
化工生产实习心得体会
2016/01/22 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python