" />
当前位置:首页 > 日记 > 正文

jQuery实现按比例缩放的方法

jQuery实现按比例缩放的方法

本文实例讲述了jQuery实现按比例缩放图片的方法。分享给大家供大家参考,具体如下:

做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样。在这里我介绍一种简单的按比例缩放图片的方法。

对于一堆图片

<img src="1.webp" border="1"></img><img src="2.webp" 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表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

在Word 2013文档中如何制作个人工

在Word 2013文档中如何制作个人工

文档,工作,电脑软件,Word,  一般上班的时候可能需要带上工作牌,当然也不全是谁都要带工作牌,每个公司要求都不一样的。在Word文档中,你知道工作牌是怎么制作出来的吗?以下是小编为您带来的关于在Word 2013中制作个人工作牌,希望对您有所帮助…

wps表格怎么插入excel图表

wps表格怎么插入excel图表

图表,方法,表格,电脑软件,wps,  数据处理,离不开Excel,那么怎样做才能简单方便的插入表格呢?对于新手来说熟练运用wps表格软件还是有一定难度,怎么办?下面就跟小编看看excel插入图表的过程吧,欢迎大家来到学习。wps的Excel插入图表的方法打开…

右键没有excel2007怎么办Excel2007

右键没有excel2007怎么办Excel2007

右键,新建文档,处理方法,电脑软件,  在电脑中,想要点击鼠标右键新建一个excel表格时,却没有这个程序,怎么办?不用着急,其实我们可以通过修改注册表添加,下面给大家分享Excel2007右键没有新建文档的处理方法,希望看完本教程的朋友都能学会并运用…

Javascript 两种刷新方法以及区别

Javascript 两种刷新方法以及区别

刷新,方法,两种,适用范围,区别,JS 两种刷新方法在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了。所…

对于Javascript 执行上下文的全面

对于Javascript 执行上下文的全面

执行上下文,电脑软件,Javascript,在这篇文章中,将比较深入地阐述下执行上下文 – JavaScript中最基础也是最重要的一个概念。相信读完这篇文章后,你就会明白javascript引擎内部在执行代码以前到底做了些什么,为什么某些函数以及变量在没有被声…

powerpoint文字打字效果怎么设置

powerpoint文字打字效果怎么设置

设置,文字,步骤,效果,电脑软件,  打字效果,是增强汇报成果表现效果的一种形式,那么大家知道怎么设置打字效果呢?下面小编就教你怎么在ppt中设置打字效果吧,希望看完本教程的朋友都能学会并运用起来。ppt中设置打字效果的步骤选择&ldquo;插入…

JS实现侧边栏鼠标经过弹出框+缓冲

JS实现侧边栏鼠标经过弹出框+缓冲

弹出框,侧边栏,鼠标,效果,电脑软件,可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。 首先,我们用两个div来简单布局以下页面:<div id="box"> <div id="share">分享到</div></div>这个分享框的弹出原理是:把内层div定…

wps文字180度倒转的设置方法

wps文字180度倒转的设置方法

方法,文字,设置,电脑软件,wps,  我们知道图片可以进行旋转,那么文字可以进行旋转吗?我们编辑文档想要文字倾斜显示应该怎样做呢?下面给大家分享wps设置文字倒转的方法。wps文字180度倒转的设置方法wps文字180度倒转的设置步骤1:首先我们写下…

angularjs下拉框空白的解决办法

angularjs下拉框空白的解决办法

下拉框,解决办法,空白,电脑软件,angularjs,搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下:<select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option …

excel中count if 函数的使用方法ex

excel中count if 函数的使用方法ex

函数,使用方法,电脑软件,count,excel,  Excel IF函数即count if 函数,运用它可以对一系列繁杂的数据进行筛选,得到自己想要的数据结果。今天,小编就教大家在Excel中count if 函数的使用方法。Excel中COUNTIF函数使用方法一(1) 求真空单元格…

微信小程序 数据遍历的实现

微信小程序 数据遍历的实现

遍历,数据,程序,电脑软件,微信小,制作数据遍历的步骤在index.js中加入数据。在index.wxml中读取数据。wx:for-item可以指定数组当前元素的变量名wx:for-index可以指定数组当前下标的变量名这两个项也可以不指定,默认数组的当前项的下标变量…

JS实现课堂随机点名和顺序点名

JS实现课堂随机点名和顺序点名

顺序,课堂,电脑软件,JS,1. 效果:2. Html代码:<body><form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onclick="stop()…