Question

我正在尝试做什么：

我正在制作一个横跨大约700像素的文章布局。在文章的顶部是一个图像。当图像宽度小于600像素时，我希望图像为float:left;，但是当图像宽度超过600像素时，我希望它所在的div扩展到完整的700像素，以便它迫使文本在neath下面。示例：我的图像宽度为640像素。不幸的是，文本仍然包装，因此我在图像的右侧推了一大块的单词...这就是为什么我希望图像所在的div跨越整个宽度。

我一直在尝试让我的jQuery工作，我尝试了3种不同的方法，但没有工作。我想我错过了什么。它所做的只是使div跨度为700像素，不受图像宽度的影响。

<div class="story-img">
    <img src="images/sample-article-sm.png" alt="A guy installing Solar Panels" width="350"/><br/>
    <span class="caption">Solar panels being installed on a roof.</span>
</div>

jQuery我正在使用：

$(document).ready(function() {
var img = $(".story-img > img");
var storydiv = $(".story-img");
var width = img.width();
if (width < 300)
    storydiv.addClass("large");
});

jQuery正在按原样运行，它正在将类添加到div“.story-img”中，但它无论图像宽度如何都可以。我想起初是因为可能没有在图像中指定宽度（这将是动态加载的）。为什么它没有抓住宽度？

Answer 1

实际上，在将图像添加到dom

之前，您正在抓取宽度

请尝试使用load事件

$('.myImage').load(function(){
   alert($(this).width());
   alert($(this).height());
  //do something here
});

jQuery .addClass基于图像宽度

1 个答案: