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

Question

我有一个 <img> 还有一些 <p>在内部 <div>.

我想获得孩子的宽度IMG并将其应用于父级的宽度，以便文本的段落与IMG相同的宽度。

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

背景：我正在开发一个使用Masonry jQuery插件的WordPress主题（http://desandro.com/resources/jquery-masonry）。我的主题与Gridalicious主题有共同点（http://suprb.com/apps/gridalicious）但是，后宽度和大小将由图像宽度决定，并且不会均匀。

我的HTML / CSS一尘不染，但我的jQuery / JavaScript非常动摇 - 但是如果我能得到一些指针，我应该可以使用它。

任何帮助真正感谢。

Answer 1

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

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

编辑： 请注意，这将基于 第一的 图片中的图像。只需更改索引（[0]）即可将其基于DIV中的另一个图像。

编辑2： 应用约翰对.width（）函数的校正。

Answer 2

这将找到页面上的所有divs，并将其宽度设置为等于其IMG子元素的宽度。

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

Answer 3

为此，您根本不需要使用JavaScript。如果将图像和P放入儿童divs，则可以像Chris的解决方案一样纯粹在CSS中完成（这是JSFIDDLE： http://jsfiddle.net/glee/qs8gj/ 以下问题：CSS-缩小父级以适合一个孩子的宽度并限制另一个孩子的宽度

诀窍是将父级设置为...

display: table-cell;

图像div到...

display: table-row;
width: 1px;

...以及包含段落文本的div

display: table-cell;
width: 1px;

像魅力一样的作品！