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

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

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

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

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

代码:

$(document).ready(function() {
     $(‘.boxcour dl dd img‘).each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100;    // 图片最大高度
     var ratio = 0;  // 缩放比例
     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, 680, 1000);
            });
        });
        function DrawImage(ImgD, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgD.src;
            if (image.width > 0 && image.height > 0) {
                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

时间: 2024-10-05 05:00:26

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

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操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

GridView 动态修改Item的LayoutParam导致Item的OnClickListener失效

GridView 动态修改Item的LayoutParam导致Item的OnClickListener失效 项目中为了实现图片的数量以及大小(类似微信图片的单张图片显示,和多张图片显示的大小是不同的)的效果,采用GridView动态修改边界,以及动态修改ImageView的大小的方式.实现效果如下: 单图: 多图 到目前为止,没有遇到什么问题,可是,之后就遇到一个问题,就是在ImageView上设置OnClickListener,第0张图片无法点击的问题. 追踪源码,发现一直运行到: 这个函数的

Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换

我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中 //项目结果选项卡的列表 $('#project_table').datagrid({ width : '100%', height: '378', url : 'getSeparationProjectInf', //title : '待分发条码列表', striped : true, nowrap : true, rownumbers : true, singleSelect : false, showHeader

Kafka Java consumer动态修改topic订阅

前段时间在Kafka QQ群中有人问及此事--关于Java consumer如何动态修改topic订阅的问题.仔细一想才发现这的确是个好问题,因为如果简单地在另一个线程中直接持有consumer实例然后调用subscribe进行修改,consumer端必然会抛出异常ConcurrentModificationException:KafkaConsumer is not safe for multi-threaded access 和KafkaProducer不同的是,KafkaConsumer不

Unity UI大小动态设置(Resize Unity UI RectTransform)

我们在开发过程中发现,要调整Unity UI元素的大小,RectTransform提供了sizeDelta属性可以用来动态修改RectTransform的大小,但同时我们也google到另外一个修改RectTransform大小的方法,方法如下: 1 public static void SetRectTransformSize(RectTransform trans, Vector2 newSize) 2 { 3 Vector2 oldSize = trans.rect.size; 4 Vec

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

在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制器中,创建3个操作action: 标记1是实现视图,而标记2与3是为form的action.其中Isus.NET有使用ContentResult来替代Response.Write向视图输出结果. 在视图中,我们在form中,放一个文件框,两个铵钮,但没有在form中,设置action值.稍后我们在铵

如何在.cs中统一动态修改xaml中style资源定义的样式

关于设置控件属性样式的方法已经在之前的博客中有提及过,博客地址:设置控件样式的方法 当然在实际项目编写过程中,不光单纯的需要设置元素样式,有时候需要动态的修改元素的样式,这个时候就有些不 同了.需要针对不同的情形来选择不同的方法修改样式. 情形一:单纯的修改一个控件元素的样式,那么只要在.cs中仅仅针对这个控件的样式属性的修改即可. 情形二:如果是要针对同一类的所有控件的样式进行相同的属性修改,比如针对页面中所有的Label控件进行修改, 那么对应之前你在给这些Label控件设置样式的不同做法,

maven 根据P参数值打包动态修改properties文件中值或一定properties

由于本人 最近忙着公司事情,昨天没有写博客,今天就继续写吧 需求:由于最近开发clover项目 ,没有使用spring,更没有使用任何框架,而使用J2EE的web工程,所以连接ZK和MongoDB.Redis等服务器需用指定properties文件, 而目前公司又分各套环境(dev.test.product),所以希望打包的时候 根据profile id 来动态使用不同环境properties文件 或者动态修改properties参数值 方法一:使用一套properties配置文件,但具体参数使

ASP.NET MVC 动态修改form的action值

在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制器中,创建3个操作action: 标记1是实现视图,而标记2与3是为form的action.其中Isus.NET有使用ContentResult来替代Response.Write向视图输出结果. 在视图中,我们在form中,放一个文件框,两个铵钮,但没有在form中,设置action值.稍后我们在铵