找到子图像宽度并将其应用于包含父div div jquery

我有一个<img>和一些<p>的内部<div>。找到子图像宽度并将其应用于包含父div div jquery

我想获取子img的宽度并将其应用于父div的宽度，以便文本段落将换行宽度与img相同。

我希望能够在同一页面上进行多次迭代。

背景： 我开发使用砖石jQuery插件（http://desandro.com/resources/jquery-masonry）一个WordPress主题。我的主题与Gridalicious主题（http://suprb.com/apps/gridalicious）有一些共同之处，但是帖子的宽度和尺寸将由图片宽度决定，并且不会一致。

我的HTML/CSS是一尘不染，但我的jQuery/JavaScript是相当不稳定 - 但如果我能得到一些指针，我应该能够使用它。

任何帮助真正赞赏。

来源

2010-07-07 theothersimon

这很好。请注意，您必须使用$（window）.load（）而不是$（document）.ready（），因为$（document）.ready（）会在图像实际加载之前触发，因此图像将没有宽度。

$(window).load(function() { 
    $('div').each(function() { 
     $(this).width($(this).find('img').width()); 
    }); 
});

编辑：注意，这将基部处的宽度关闭在div的第一图像。只需更改索引（[0]），使其脱离div中的另一个图像。

编辑2：应用John对.width（）函数的修正。

来源

2010-07-07 13:39:19

这是一点点klunky。例如，width（）无论如何都只返回第一个选定元素的宽度，所以'img'的整个声明是多余的。另外，窗口上的负载不好，因为它会等待整个页面完成加载。将脚本放在页脚中可以正常工作。 – 2010-07-07 13:56:12

@John你说得对宽度（）。但是，窗口负载是必要的。我们希望等到所有内容都被加载后，因为除非图像的宽度被明确声明，否则浏览器将不知道图像有多宽，即使元素已被解析。 – 2010-07-07 14:27:46

嗨，大家好，谢谢你的指点。我已上载我一起完成这在这里工作，如果你有兴趣的工作的例子“概念验证”： www.simonlast.co.uk/example/04.html 似乎是工作，但它似乎可能会出现一些意想不到的与砖石的相互作用，但我认为这是我可以调整的。感谢您的帮助，非常感谢。 – theothersimon 2010-07-07 15:40:20

这将找到页面上的所有div，并将它们的宽度设置为等于它们的img子元素的宽度。

$('.divselector').attr('width', $(this).find('img').attr('width'))

来源

2010-07-07 13:20:45

只要确保你添加一个类到div并使用它来选择div。否则，这将适用于DOM中的所有div。 – 2010-07-07 13:23:51

根本不需要使用Javascript。如果你把图像和p到孩子的div，这可以纯粹CSS做在克里斯的解决方案（这里的的jsfiddle：http://jsfiddle.net/glee/qs8GJ/以下SO问题： css - shrink a parent div to fit one child's width and constrain the width of the other child

诀窍是父DIV设为...

display: table-cell;

图像div来...

display: table-row; 
width: 1px;

...和包含段落文本的div来

display: table-cell; 
width: 1px;

工程就像魅力！

来源

2016-04-17 02:48:17 clayRay

找到子图像宽度并将其应用于包含父div div jquery

回答

相关问题