基于jquery实现等比缩放图片


Posted in Javascript onDecember 03, 2014

基于jquery的图片尺寸调整

resize.js

$(window).bind("load", function() {

    // IMAGE RESIZE

    $('#product_list img').each(function() {

        var maxWidth = 120;

        var maxHeight = 120;

        var ratio = 0;

        var width = $(this).width();

        var height = $(this).height();

     

        if(width > maxWidth){

            ratio = maxWidth / width;

            $(this).css("width", maxWidth);

            $(this).css("height", height * ratio);

            height = height * ratio;

        }

        var width = $(this).width();

        var height = $(this).height();

        if(height > maxHeight){

            ratio = maxHeight / height;

            $(this).css("height", maxHeight);

            $(this).css("width", width * ratio);

            width = width * ratio;

        }

    });

    //$("#contentpage img").show();

    // IMAGE RESIZE

});

代码很简洁,使用起来也很简单,小伙伴们直接使用即可

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
javascript中clone对象详解
Dec 03 #Javascript
javascript使用正则表达式检测IP地址
Dec 03 #Javascript
Javascript快速排序算法详解
Dec 03 #Javascript
Javascript冒泡排序算法详解
Dec 03 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
JS类的封装及实现代码
2009/12/02 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
物业工作计划书
2014/01/10 职场文书
小摄影师教学反思
2014/04/27 职场文书
历史学专业求职信
2014/06/19 职场文书
员工年终考核评语
2014/12/31 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技