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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
如何在vue 中引入使用jquery
Nov 10 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
一个查看session内容的函数
2006/10/09 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
JS实现进度条动态加载特效
2020/03/25 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python ubplot使用方法解析
2020/01/10 Python
python/golang 删除链表中的元素
2020/09/14 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
装修致歉信
2014/01/15 职场文书
小学运动会口号
2014/06/07 职场文书
服务行业演讲稿
2014/09/02 职场文书
个人授权委托书范文
2014/09/21 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
捐助倡议书
2015/01/19 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis