javascript - 区分垂直和水平图像格式jQuery

我想区分图像是垂直格式还是水平格式，并添加一个特殊的类。我用它来使我的div完全充满我的形象。

我的HTML：

<a href="images/gallerie/image-1.jpg" data-lightbox="image-1" class="impression">
    <img src="images/gallerie/image-1.jpg">
</a>

我的CSS：

.wide {
    height: 100%;
    width: auto;
}

.tall {
    height: auto;
    width: 100%;
}

我的JS（jQuery）：

$('.impression').find('img').each(function() {
    if($(this).width() / $(this).height() > 1) {
        $(this).addClass('wide');
    }

    else {
        $(this).addClass('tall');
    }
});

它仅在某些时候有效，我不知道为什么。
在我的iPhone上，它永远无法运行（Chrome）。

还有其他解决方案，或者有时可行的原因吗？

谢谢！

最佳答案

您需要使用加载事件处理程序，以便在检查尺寸之前加载图像

$('.impression').find('img').on('load',(function() {
    // image is loaded now
    if($(this).width() / $(this).height() > 1) {
        $(this).addClass('wide');
    }

    else {
        $(this).addClass('tall');
    }
});

不需要each，因为jQuery将在内部使用each，而this将是图像实例