基于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 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
微信小程序实现日历功能
Nov 27 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
PHP编码规范-php coding standard
2007/03/16 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python获取当前时间的方法
2014/01/14 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python切片索引用法示例
2018/05/15 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python dataframe NaN处理方式
2019/12/26 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
关于环保的建议书400字
2014/03/12 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
求职信模板
2014/05/23 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
八项规定对照检查材料
2014/08/31 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书