基于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 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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 文件系统详解
2012/09/13 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
详解python单元测试框架unittest
2018/07/02 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
如何用python处理excel表格
2020/06/09 Python
Python数据可视化图实现过程详解
2020/06/12 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
实习班主任自我评价
2015/03/11 职场文书
新闻稿格式范文
2015/07/18 职场文书
优秀志愿者感言
2015/08/01 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Python数据类型最全知识总结
2021/05/31 Python