基于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函数调用的方式
May 06 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
浅谈javascript错误处理
Aug 11 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jquery json 实例代码
2010/12/02 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
js实现购物车功能
2018/06/12 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python异常处理操作实例详解
2018/08/28 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Django多数据库的实现过程详解
2019/08/01 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
自主招生自荐信范文
2013/12/04 职场文书
社团活动策划书范文
2014/01/09 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
Django中session进行权限管理的使用
2021/07/09 Python