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

发布于 2024-09-08 15:48:33 字数 662 浏览 3 评论 0原文

我有一个和

内的一些

。

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

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

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

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

任何帮助真的很感激。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾城月光淡如水﹏ 2024-09-15 15:48:33

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

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

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

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

This works perfectly. Note that you have to use $(window).load() instead of $(document).ready(), because $(document).ready() fires before images are actually loaded, and thus the images will have no width.

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

Edit: Note that this will base the width off of the first image in the div. Simply change the index ([0]) to base it off another image in the div.

Edit 2: Applied John's correction on the .width() function.

回复收藏 0 原文

阪姬 2024-09-15 15:48:33

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

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

This will find all the divs on the page and set their widths equal to their img child element's width.

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

回复收藏 0 原文

来日方长 2024-09-15 15:48:33

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

技巧是将父级 div 设置为...

display: table-cell;

将图像 div 设置为...

display: table-row;
width: 1px;

...以及包含段落文字

display: table-cell;
width: 1px;

作品魅力十足！

You don't need to use Javascript at all for this. If you put the image and the p into child divs, this can be done purely in CSS as in Chris's solution (here's the JSFiddle: http://jsfiddle.net/glee/qs8GJ/ to the following SO question:
css - shrink a parent div to fit one child's width and constrain the width of the other child

The trick is to set the parent div to...