2010-11-10 88 views
0

嘿家伙, 我不知道如何解决这个问题:jquery:设置图像宽度但不大于原始大小?

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body p img").each(function() { 
     var os = $(this).width(); 
     //if (bw < os) { 
      $(this).removeAttr('height'); 
      $(this).width(bw); 
     //} 
    }); 
} 

基本上是我的。员额体DIV动态asdjusted的屏幕尺寸。 它内部的每个图像都应该调整到.post-body div的宽度,但只有当.post-body不大于图像的原始大小时。我不希望图像变得模糊。

至于现在它实际上几乎就像我想要的那样工作。该函数在调整窗口大小时调用。但是,如果.post-body大于实际图像大小,图像仍会放大。

如果我取消注释上面的代码似乎工作,但只有当我调整窗口的大小较小。如果调整大一些,图像将不再调整并保持较小。 这可能是因为每次我调用函数时都会覆盖原始大小。

不知何故,我找不到合适的解决方案,我需要你的帮助。 提前致谢 亚光

+0

你的两条注释掉的行不行吗?什么发生在他们没有注释的时候,而不是他们评论的时候? (他们看起来很对我) – 2010-11-10 12:48:53

+0

好吧,它确实是一种工作,但只有当我刷新窗口。如果我调整大小并将其缩小,则图像的大小会适当调整,但只要将它拖大,图像不会再放大! – matt 2010-11-10 12:56:07

+0

您是否可以确认您的活动是在每个窗口调整大小而不是仅在窗口加载时触发?我们可以在某处看到你的代码吗? – 2010-11-10 13:11:10

回答

1

当试图调整窗口的大小以使窗口变大(因此div和图像)时,您遇到的问题是原始图像大小正在丢失。

下面的代码所需要的DOM加载后运行,并且图像具有宽度(可能需要​​后发生)

$(".post-body p img").each(function() { 
    // Save the original image width 
    $(this).data('width', $(this).width()); 
}); 

如下因素代码需要当前窗口中运行调整事件(像你):

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body p img").each(function() { 
     // Check the width of the original image size 
     if (bw < $(this).data('width')) { 
      $(this).removeAttr('height'); 
      $(this).width(bw); 
     } 
    }); 
} 
+0

可能无法正常工作,因为最接近的元素是固定为650px的段落。 – matt 2010-11-10 13:08:47

+0

它正在寻找与'.post-body'匹配的最接近的元素,而不是最接近的元素(除非该元素有一个“post-body”类)。 – 2010-11-10 13:10:22

+0

不起作用,也会发生同样的情况。只是让这个窗口变小从而使它变大并不会做任何事情。 – matt 2010-11-10 13:25:37

0

您需要确保在加载后测量图像的宽度。所以如果你只是在正常的jQuery代码中尝试$('#my-img').width(),它可能会返回0(除非你有宽度属性或宽度样式集),因为ready事件不会等待图像加载。 $('#my-img').load(function() { /* do something */ });应该这样做。

相关问题