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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery实现图片轮播器
May 23 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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简单浏览目录内容的实现代码
2013/06/07 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
日期 时间js控件
2009/05/07 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python实现自动上京东抢手机
2018/02/06 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
基于python实现简单日历
2018/07/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
求职信范文英文版
2014/01/05 职场文书
事业单位请假制度
2014/01/13 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL