Найти самое большое изображение

Question

Я использую следующее, чтобы найти изображение в .content и применить его ширину к .project родительской ширине.

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

Моя проблема в том, что он не находит наибольшее изображение в .content, а иногда применяет ширину, меньшую, чем самое большое изображение, и создает проблемы с моиммакет.

Любая помощь будет отличной.Спасибо.

---

Редактировать

Woops, деталь неверно, ответы великолепны!Мне просто нужно применить максимальную ширину родительского project div.

Построение ответа Судхира.

Это не работает, это должно работать?

 $(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});
        }
    });       
});

Answer 2

Вы имеете в виду что-то вроде этого:

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

Надеюсь, это поможет

Answer 3

Это работает, я не знаю, хотите ли вы, чтобы оно было супер сжатым:

function findmax() { 
    max=Math.max(max,parseInt($(this).css('width'))); }
function sum() {
    max=0;
    $(this).children('img').each(findmax);
    $(this).parent().css('width',max+'px'); }
var max;
$('.content').each(sum);

Answer 4

Пример в руководстве по созданию плагинов jQuery очень похож на то, что вы ищете:

$.fn.maxWidth = function() {
  var max = 0;

  this.each(function() {
    max = Math.max(max, $(this).width());
  });

  return max;
};

Используйте его так:

var maxWidth = $('.content img').maxWidth();

Answer 5

Чтобы получить максимальную ширину чего-либо, просто итерируйте с этой функцией:

var getMaxWidth = function ($elms) {
    var maxWidth = 0;
    $elms.each(function () {
        var width = $(this).width();
        if (width > maxWidth) {
            maxWidth = width;
        }
    });
    return maxWidth;
};

Answer 6

Вы просматриваете все изображения, поэтому ширина вашего контейнера всегда будет такой же, как у вашего последнего изображения.Вы должны проверить ширину текущего изображения и сравнить его с шириной самого широкого изображения, найденного в этой точке, и соответственно отрегулировать ширину.

Редактировать

Попробуйте это:

$('.content').each(function () {
    var max_width = 0;
    $(this).find('img').each(function () {
        if ($(this).width() > max_width) {
            max_width = $(this).width();
        }
    });

    $(this).width(max_width);

});

Без ума от вложенных $(this), но я думаю, что это должно сработать.