基于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数据缓存功能的实现思路及简单模拟
May 27 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 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
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js简单抽奖代码
2015/01/16 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
理解Python中的类与实例
2015/04/27 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python tkinter实现屏保程序
2019/07/30 Python
Python进度条的制作代码实例
2019/08/31 Python
python内置模块collections知识点总结
2019/12/19 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
文秘专业应届生求职信
2014/05/26 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Python可视化学习之seaborn调色盘
2022/02/24 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript