基于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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
Sep 08 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
给初学PHP的5个入手程序
2006/11/23 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python中如何打包用户自定义模块
2020/09/23 Python
生产厂厂长岗位职责
2013/12/25 职场文书
音乐教学案例
2014/01/30 职场文书
卖车协议书
2014/04/21 职场文书
大学校园招聘会感想
2015/08/10 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA