基于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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
js实现目录定位正文示例
Nov 14 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
javascript冒泡排序小结
Apr 10 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
浅谈React Event实现原理
Sep 20 Javascript
vue+ts下对axios的封装实现
Feb 18 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
跟老齐学Python之Import 模块
2014/10/13 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python数组循环处理方法
2019/08/26 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python中yield的用法详解
2021/01/13 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
linux面试题参考答案(8)
2015/08/11 面试题
中间件分为哪几类
2016/09/18 面试题
超越自我演讲稿
2014/05/21 职场文书
贷款委托书
2014/08/01 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL