基于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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
JS扩展方法实例分析
Apr 15 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
Vue仿百度搜索功能
Dec 28 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
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
javascript new fun的执行过程
2010/08/05 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
深入了解python列表(LIST)
2020/06/08 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
华为的Java面试题
2014/03/07 面试题
高一物理教学反思
2014/01/24 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
文字自荐书范文
2014/02/10 职场文书
出纳员岗位责任制
2014/02/11 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
煤矿安全保证书
2015/02/27 职场文书
保险公司增员口号
2015/12/25 职场文书
2019年思想汇报
2019/06/20 职场文书