查找子图像宽度并将其应用于包含父级的div jquery
-
02-10-2019 - |
题
我有一个 <img>
还有一些 <p>
在内部 <div>
.
我想获得孩子的宽度IMG并将其应用于父级的宽度,以便文本的段落与IMG相同的宽度。
我希望能够在同一页面上进行多个迭代。
背景:我正在开发一个使用Masonry jQuery插件的WordPress主题(http://desandro.com/resources/jquery-masonry)。我的主题与Gridalicious主题有共同点(http://suprb.com/apps/gridalicious)但是,后宽度和大小将由图像宽度决定,并且不会均匀。
我的HTML / CSS一尘不染,但我的jQuery / JavaScript非常动摇 - 但是如果我能得到一些指针,我应该可以使用它。
任何帮助真正感谢。
解决方案
这很好。请注意,您必须使用$(window).load()而不是$(document).ready(),因为$(document).dread()在实际加载图像之前触发,因此图像没有宽度。
$(window).load(function() {
$('div').each(function() {
$(this).width($(this).find('img').width());
});
});
编辑: 请注意,这将基于 第一的 图片中的图像。只需更改索引([0])即可将其基于DIV中的另一个图像。
编辑2: 应用约翰对.width()函数的校正。
其他提示
这将找到页面上的所有divs,并将其宽度设置为等于其IMG子元素的宽度。
$('.divselector').attr('width', $(this).find('img').attr('width'))
为此,您根本不需要使用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;
像魅力一样的作品!