找到最大的图像

Question

我正在使用以下内容查找其中的图像.content并将其宽度应用于.project父宽度.

    $('.content').find('img').each(function () {
         var $this = $(this), width = $this.width();
         {
            $(this).closest('.project').css("width", width);
        }
    });

我的问题是它没有找到最大的图像.content,有时会应用小于最大图像的宽度,并且会产生布局问题.

任何帮助都会很棒.谢谢.

---

编辑

Woops,细节错了,答案很棒!我只需要应用父projectdiv 的最大宽度.

建立Sudhir的答案.

如果有效,这不起作用？

 $(document).ready(function() {
var max_width = 0;
$('.content').find('img').each(function(){
        var this_width = $(this).width();
        if (this_width > max_width) max_width = this_width;
});
$(this).closest('.project').css('width', max_width + 'px');
});

布局示例.有很多项目.

<div class="container">

    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />
            <img src="medium.jpg"  height="400" width="600" />

        </div>

        <div class="meta">Other content here.

        </div>
    </div>



    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />

       </div>

        <div class="meta">Other content here.

        </div>
    </div>

Answer 1

您无法在文档就绪事件上执行此操作.您必须在窗口加载时执行此操作,因为必须加载所有图像才能获取尺寸.

$(window).load(function(){
    $('.project').each(function(){
        var maxWidth = 0;
        $(this).find('.content img').each(function(){
            var w = $(this).width();
            if (w > maxWidth) { 
              maxWidth = w;
            }
        });
        if (maxWidth) {
          $(this).css({width:maxWidth});
        }
    });       
});