基于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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
js跳转页面方法总结
Jan 29 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Angularjs 事件指令详细整理
Jul 27 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
讲解vue-router之命名路由和命名视图
May 28 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
构建简单的Webmail系统
2006/10/09 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Javascript小技巧之生成html元素
2014/05/15 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
表演方阵解说词
2014/02/08 职场文书
人事任命通知
2015/04/20 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers