首页 web前端 js教程 jQuery在页面加载时动态修改图片尺寸的方法_jquery

jQuery在页面加载时动态修改图片尺寸的方法_jquery

May 16, 2016 pm 04:08 PM
jquery 修改 加载 动态 图片尺寸 方法 页面

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法。分享给大家供大家参考。具体如下:

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_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
});
登录后复制

希望本文所述对大家的jQuery程序设计有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

钉钉怎么修改群里的个人名称_钉钉修改群里个人名称方法 钉钉怎么修改群里的个人名称_钉钉修改群里个人名称方法 Mar 29, 2024 pm 08:41 PM

钉钉怎么修改群里的个人名称_钉钉修改群里个人名称方法

怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程 怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程 Mar 28, 2024 pm 12:50 PM

怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程

微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人) 微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人) May 01, 2024 pm 12:01 PM

微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人)

将VirtualBox固定磁盘转换为动态磁盘,反之亦然 将VirtualBox固定磁盘转换为动态磁盘,反之亦然 Mar 25, 2024 am 09:36 AM

将VirtualBox固定磁盘转换为动态磁盘,反之亦然

抖音蓝V可以改名字吗?企业抖音蓝V号名称修改步骤有哪些? 抖音蓝V可以改名字吗?企业抖音蓝V号名称修改步骤有哪些? Mar 22, 2024 pm 12:51 PM

抖音蓝V可以改名字吗?企业抖音蓝V号名称修改步骤有哪些?

快速掌握:华为手机开启两个微信账号方法大揭秘! 快速掌握:华为手机开启两个微信账号方法大揭秘! Mar 23, 2024 am 10:42 AM

快速掌握:华为手机开启两个微信账号方法大揭秘!

手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋) 手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋) May 04, 2024 pm 06:01 PM

手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋)

手机字体大小设置方法(轻松调整手机字体大小) 手机字体大小设置方法(轻松调整手机字体大小) May 07, 2024 pm 03:34 PM

手机字体大小设置方法(轻松调整手机字体大小)

See all articles