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

Posted 2023-03-06

【中文标题】查找子图像宽度并将其应用于包含父 div jquery

【英文标题】：find child image width and apply it to containing parent div jquery

【发布时间】：2011-03-12 19:38:34

【问题描述】：

我在<div> 中有一个<img> 和一些<p>。

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

我希望能够对同一页面上的多次迭代执行此操作。

背景： 我正在开发一个使用 masonry jquery 插件 (http://desandro.com/resources/jquery-masonry) 的 wordPress 主题。我的主题与 Gridalicious 主题 (http://suprb.com/apps/gridalicious) 有一些共同点，但帖子的宽度和大小将由图像宽度决定，并且不会统一。

我的 html/css 是一尘不染，但我的 jquery/javascript 非常不稳定 - 但如果我能得到一些指示，我应该能够使用它。

非常感谢任何帮助。

【参考方案1】：

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

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

【讨论】：

只要确保向 div 添加一个类并使用它来选择 div。否则，这将适用于 DOM 中的所有 div。

【参考方案2】：

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

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

编辑：请注意，这将基于 div 中 第一个图像的宽度。只需更改索引 ([0]) 以使其基于 div 中的另一个图像。

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

【讨论】：

这有点笨拙。例如，width() 无论如何只返回第一个选定元素的宽度，因此img 的整个声明是多余的。此外，窗口加载也不好，因为它会等待整个页面完成加载。将脚本放在页脚中就可以了。

@John 你说得对宽度（）。但是，窗口负载是必要的。我们希望等到所有内容都加载完毕，因为除非特别声明了图像的宽度，否则浏览器将不知道图像的宽度，即使元素已被解析。跨度>

大家好，感谢您的指点。如果您有兴趣，我已经上传了我正在使用的示例“概念证明”，以便在此处工作：www.simonlast.co.uk/example/04.html 似乎正在工作，尽管看起来可能有些意外与砖石的互动，但我认为这是我可以调整的。感谢您的帮助，非常感谢。

大家好，如果您查看此示例：www.simonlast.co.uk/example/04.html，您可以在 ff、chrome 和 safari 中运行良好，但我得到一个 ' IE8 中的“无效参数”错误。这似乎与父调整大小脚本有关，有什么线索可以解释为什么吗？以及如何解决？

【参考方案3】：

您根本不需要为此使用 Javascript。如果您将图像和 p 放入子 div 中，这可以完全在 CSS 中完成，就像在 Chris 的解决方案中一样（这里是 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;

像魅力一样工作！