使用 max-height 调整大小后无法使用 Jquery 获取图像宽度答案

【问题标题】：Can't get width of image with Jquery after using max-height for resize使用 max-height 调整大小后无法使用 Jquery 获取图像宽度
【发布时间】：2012-12-22 01:29:07
【问题描述】：

我有一组动态获取的图像。我为每个图像应用最大高度，我将其用于调整大小。

我有一个 jquery re-size 函数：

// 调整我的图片大小

function resizeMyImg(objct, containerWidth, containerHeight) {
   var width   = $(objct).width();   // I try alerting here and get a 0 answer
   if (width < containerWidth) {
       var percentageToAdd = ((100 * width) / containerWidth) + 100;
       $(objct).css({ maxHeight: percentageToAdd + "%" });
   }
}

我正在尝试将此调整大小功能应用于我的图像：

$(document).ready(function () { 
    $(".photoAlbum").find("img").each(function () {
        var myImage2 = $(this);
        myImage2.load(function () {
            alert(myImage2.height());   // I try alerting here and also get a 0 answer
            resizeMyImg(myImage2, 240, 240);
        });
    });
});

这是我在页面中使用的 html，希望对您有所帮助：

<div style="padding-top: 0px;" id="photosHere">

                    <div class="photoAlbum">

                        <img alt="" src="/Uploads/553290_471992686161625_498413822_n867.jpg" style="max-height: 100%;">

                    </div>

                    <div class="photoAlbum">

                        <img alt="" src="/Uploads/484524_430827793626240_991120671_n575.jpg" style="max-height: 100%;">

                    </div>

                    <div class="photoAlbum">

                        <img alt="" src="/Uploads/553290_471992686161625_498413822_n717.jpg" style="max-height: 100%;">

                    </div>

                    <div class="photoAlbum">

                        <img alt="" src="/Uploads/me993.jpg" style="max-height: 100%;">

                    </div>

                    <div class="photoAlbum">

                        <img alt="" src="/Uploads/me759.jpg" style="max-height: 100%;">

                    </div>

                </div>

我的问题是我无法获得图像的宽度，我总是得到 0 而不是实际宽度。但是，如果我测试图像时使用 firebug，我会得到正确的宽度。

注意： 有时我得到了正确的答案，但我刷新并再次得到 0。请问有什么建议吗？？令人沮丧的是我花了几个小时在这上面..

【问题讨论】：

能否请您给我看一下您页面的完整代码我想知道您是如何在 html 中传递函数的，或者如果您可以让我知道的话，请告诉我
我添加了 HTML，这是唯一缺少的部分。感谢您的帮助:)

标签： javascript jquery image-resizing

【解决方案1】：

今天我正在编写一个 jQuery 插件，我遇到了同样的问题，所以我最终引用了 DOM 元素。试试

$(this)[0].height 而不是myImage2.height()

和

$(this)[0].width 而不是myImage2.width()。

【讨论】：

您必须参考并注意调用事件处理程序的上下文。这个答案提供了正确的解决方案，因为 load 是一个事件处理程序，并且与所有事件处理程序一样，上下文 (this) 是发生事件的 DOM 对象。并且，它在 myImage2 未定义的范围（窗口）中执行。
更重要的是，使用以下参考（不要创建 jQuery ojected，除非必要）：this.height 代替 myImage2.height() 和 this.width 代替 myImage2.width()。 .. 请记住，这是一个 DOM 对象（在这种情况下，是图像）具有内在属性，高度和宽度。不要为此浪费对 jQuery 的调用。
大家好，感谢您的反馈。我尝试使用 $(this)[0].width 并不再给我 0 作为价值，但它给了我一个价值不同于实际调整大小的图像宽度...
@user1922845 我建议操作宽度和高度属性，首先检查两个比例（图像的比例和容器的比例），而不是弄乱 max-height css 规则。
@inhan Nop。使用 max-height 和 max-width 可以让你重新调整大小，几乎没有 jquery 代码。只是缺少这部分，我似乎无法弄清楚。

【解决方案2】：

我认为正确的宽度可能来自于 firebug 的摆弄，刷新会清除所有摆弄。

你试过了吗：

 alert(myImage2.outerHeight());

在您显示的第二个代码中和

var width = $(objct).outerWidth

在您的第一个代码中？ (http://api.jquery.com/outerWidth/)

【讨论】：

控制台说的是图片的metric是什么（不是console.log，而是打开metric）？如果您有一个小提琴或工作示例，则诊断会更容易。看起来你的代码应该是可靠的。
我已经添加了我在我的问题中使用的 HTML。希望有帮助？请注意，在使用 $(this)[0].height 而不是 myImage2.height() 之后， outerHeight() 有效，但给了我图像的原始高度而不是重新调整大小的高度。如果我使用 .height() 我得到一个不同于 0 的值，但仍然不是调整大小图像的高度..