每个功能调整图像大小

Question

在我的网站上，我有一个名为“images”的页面，我可以动态显示一些图像。 但是由于每个图像的大小不同，我使用jQuery来应用一个按高度或宽度调整图像大小的类，如下代码所示：

JQUERY

$("img").each(function(){
    var widthImage = $(this).width();
    var heightImage = $(this).height();

    if(widthImage > heightImage){
        $(this).addClass('maxWidth');
        $(this).removeClass('maxHeight');
    }       
    else if(widthImage < heightImage){
        $(this).removeClass('maxWidth');
        $(this).addClass('maxHeight');          
    }
    else if(widthImage == heightImage){
        $(this).removeClass('maxWidth');
        $(this).addClass('maxHeight');
    }
});

CSS

.maxWidth{width: 100%;}
.maxHeight{height: 100%;}

代码有效，但是当我第一次访问该页面时，“maxHeight”类将应用于所有图像。然后，一旦你重新加载页面，这些类就在正确的位置。

重新加载前的图片：

重装后的图片：

AFTER