基于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 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JS的数组迭代方法
Feb 05 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
js中unicode转码方法详解
Oct 09 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
js实现交通灯效果
Jan 13 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
vuejs如何配置less
2017/04/25 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
幼师自荐信范文
2013/10/06 职场文书
成人大专自我鉴定范文
2013/10/19 职场文书
自我评价的范文
2014/02/02 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python