查找最大的图像答案

【问题标题】：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"  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>

【问题讨论】：

我无法想象您网站上 Div 的布局。你有很多 .content div，每个都有自己的 .project div？还是有一个 .content div，里面有 .project div，每个里面都有图片？您能否发布一个 HTML 布局的示例。
是的，每个 .content div 也有它自己的父 .project div。 @Tim 我希望这是有道理的，很多 .projects 在一个更大的容器中。

标签： jquery image width

【解决方案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 变量。 :-)