基于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 相关文章推荐
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python下简易的单例模式详解
2019/04/08 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
个人评价范文分享
2014/01/11 职场文书
代理班主任的自我评价
2014/02/04 职场文书
安全生产先进个人总结
2015/02/15 职场文书
加入学生会自荐书
2015/03/05 职场文书
七一表彰大会简报
2015/07/20 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle