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

Question

我想区分图像是垂直格式还是水平格式，并添加一个特殊的类。我用它来用我的图像完全填充我的 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)。

有没有人有其他解决方案或者它有时有效的原因？

谢谢!

Answer 1

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

$('.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 将是图像实例