查找最大的图像

Posted 2023-03-06

【中文标题】查找最大的图像

【英文标题】：Find largest image

【发布时间】：2012-03-20 15:22:07

【问题描述】：

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

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

我的问题是它在.content 中找不到最大 图像，并且有时应用的宽度小于最大图像，这给我的布局造成了问题。

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

---

编辑

糟糕，detail 错了，答案很棒！我只需要应用父project div 的最大宽度。

以 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"    />
            <img src="large.jpg"    />
            <img src="medium.jpg"    />

        </div>

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

        </div>
    </div>



    <div class="project">
        <div class="content">
            <img src="small.jpg"    />
            <img src="large.jpg"    />

       </div>

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

        </div>
    </div>

【问题讨论】：

我无法想象您网站上 Div 的布局。你有很多 .content div，每个都有自己的 .project div？还是有一个 .content div，里面有 .project div，每个里面都有图片？您能否发布一个 html 布局的示例。

是的，每个 .content div 也有它自己的父 .project div。 @Tim 我希望这是有道理的，很多 .projects 在一个更大的容器中。

【参考方案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);
        
    );       
);

【讨论】：

太棒了@kitgui.com。我唯一的问题是，如果没有找到图像，它默认为 0px。这再次打破了布局。但是我是否应该编写一个额外的脚本来查找没有图像的项目。

对，我的意思是向您展示主要问题是窗口加载，而不是其他问题。您可以根据需要进行修复。这是出于演示目的。如果你只是为了嘘声和咯咯笑，我会给你一个布尔值

非常感谢，不知道有没有办法避免窗口加载问题？

是的，您可以为每个图像单独放置一个加载事件，并使用 data 属性为其提供“.project”和“maxWidth”的上下文。如果图像被缓存并且不像 Chrome 有时那样触发，这会变得有点棘手。不那么令人头疼的方法是依赖窗口加载，但它看起来可能更慢。您还可以将 div 包裹在图像周围并使用溢出隐藏并为其提供预期的平均尺寸。然后你可以调整负载。至少用户不会注意到那么多。

@kitgui.com 如果我没记错的话，您不能在旧版 MSIE 中的图像上设置“加载”事件

【参考方案2】：

这行得通，但我不知道你是否希望它超级压缩：

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);

【参考方案3】：

您正在循环浏览所有图像，因此容器的宽度将始终与上一张图像相同。您应该检查当前图像的宽度，并将其与在该点找到的最宽图像的宽度进行比较，并相应地调整宽度。

编辑

试试这个：

$('.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) 感到很疯狂，但我认为它应该可以工作。

【参考方案4】：

jQuery plugin authoring guide 中的示例与您要查找的内容非常相似：

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

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

  return max;
;

像这样使用它：

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

【参考方案5】：

你的意思是这样的：

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');

希望对你有帮助

【讨论】：

这很好用，除了它对每个.project 应用相同的宽度。而不是在项目中找到最大的图像并将最大的图像应用于该项目。就像.closest 以前的工作方式一样。

【参考方案6】：

要获得最大宽度，只需使用此函数进行迭代：

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

【讨论】：

您忘记初始化width 变量。 :-)