jq操作img大小(动态修改)

时间:2022-05-09 00:05:31

今天适配app页面是约到一个问题

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。

通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。

这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等

代码:

$(document).ready(function() {
$('.boxcour dl dd img').each(function() {
var maxWidth = ; // 图片最大宽度
var maxHeight = ; // 图片最大高度
var ratio = ; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
} // 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width * ratio); // 设定等比例缩放后的高度
}
});
});

在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为10.0.648.204),会产生图片以原有尺寸显示出来的bug。

后来把$('.post img').each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。

从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时,图片载入与动态改变图片的js代码执行顺序不确定。

----------------------------------------------------------------------------------------------------------------------------------

上面是文章的全部类容,关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法

var width = $(this).width();    // 图片实际宽度
var height = $(this).height(); // 图片实际高度

修改代码:

jQuery(window).load(function () {
jQuery("div.product_info img").each(function () {
DrawImage(this, , );
});
});
function DrawImage(ImgD, FitWidth, FitHeight) {
var image = new Image();
image.src = ImgD.src;
if (image.width > && image.height > ) {
if (image.width / image.height >= FitWidth / FitHeight) {
if (image.width > FitWidth) {
ImgD.width = FitWidth;
ImgD.height = (image.height * FitWidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
} else {
if (image.height > FitHeight) {
ImgD.height = FitHeight;
ImgD.width = (image.width * FitHeight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
}

原文链接:http://blog.csdn.net/roman_yu/article/details/6641911

jq操作img大小(动态修改)的更多相关文章

  1. Wordpress编辑器(Tinymce)在Chrome中动态修改图片大小

    Chrome不支持tinymce中图片动态修改大小,可以在theme的functions.php中加入下面代码在Tinymce中模拟这一功能: function tinymce_editor_sett ...

  2. 关于360插件化Replugin Activity动态修改父类的字节码操作

    近期在接入360插件化方案Replugin时,发现出现崩溃情况. 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find c ...

  3. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  4. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  5. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  6. springboot2整合logback.xml动态修改日志打印级别

    今天找bug烦到了,生产上的日志级别不能修改,非常不利于排查问题,于是想到了动态修改日志打印级别, 因为上一周把项目升级成springboot2,并且使用logback.xml管理日志打印,所以修改也 ...

  7. ASP.NET MVC程序中动态修改form的Action值

    在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制 ...

  8. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  9. WWF3动态修改工作流&lt&semi;第九篇&gt&semi;

    一.动态添加或移除工作流活动 首先添加一个顺序的空白工作流. 然后添加一个Winform程序,界面如下: 代码如下: namespace WinForm { public partial class ...

随机推荐

  1. Sublime Text 3 个人开发习惯

    1.添加author.date到函数注释里面 docblockr插件 a.preferences--package settings--docblockr--settings-user点击打开 b.在 ...

  2. java设计模式设计模式

    JAVA设计模式之单例模式   概念: java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍三种:懒汉式单例.饿汉式单例.登记式单例. 单例模式有以下特点: 1.单例类只能有一 ...

  3. &lbrack;改善Java代码&rsqb;推荐使用String直接量赋值

    建议52:推荐使用String直接量赋值 一.建议 String对象的生成方式有两种: 1.通过new关键字生成,String str3 = new String(“中国”); 2.直接声明,如:St ...

  4. TransactionScope IsolationLevel 事务隔离级别

    事务有四个特性 第一原子性,事务具有独立的不能被拆分的,不能只做部分,事务的性质是要么全做,要么都不做. 第二统一性,在事务执行之前和事务执行之后的数据是一致. 第三隔离性,事务是独立的,开发者不能查 ...

  5. 【国家集训队2010】小Z的袜子(莫队)

    题面 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把 ...

  6. HTTP相关&colon;TCP&sol;IP、DNS

    最近在看HTTP的书,看得有点慢,而且断断续续的,很多东西看完就忘了.知识点多且零散,感觉要多看几遍才能消化. TCP/IP协议族按层次分为4层: 应用层: 应用层决定了向用户提供应用服务时通信的活动 ...

  7. EntityFramework&plus;EntityFramework&period;SqlServerCompact部署网站

    1,最好通过Nuget添加引用EntityFramework.SqlServerCompact,省得去手动填写配置文件. 2,部署后遇到如下的问题: 原因是打包后的Bin下面缺少System.Data ...

  8. java程序员学C&num;

    因为工作需要,我要学习C#,其实我觉得不错,我喜欢了解更多的语言,因为这对我今后的发展很有帮助,毕竟技多不压身,下面是我今天学习后总结C#的基本语法: 我曾经学过C,而且又是java程序员,所以对我来 ...

  9. git learn

    $ git config --global user.name "Your Name" $ git config --global user.email "email@e ...

  10. Ipython使用

    目录 Ipython说明 Ipython使用 安装使用 TAB键自动补全 内省(?命令) 执行系统命令(!) 与操作系统交互 %run命令执行文件代码 %paste %cpaste命令执行剪贴板代码 ...