JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script>
   
</script>
<style>

</style>
</head>
<body>
<img src="http://24.media.tumblr.com/tumblr_m9t0dwyu0P1qjfsubo1_500.jpg"/>
<img src="http://24.media.tumblr.com/tumblr_m9iqv8oQl01qcpwsso1_500.jpg "/>
<img src="http://25.media.tumblr.com/tumblr_m9n4kyf8aA1r1thfzo5_1280.jpg"/>  
</body>
</html>

CSS

img{
height:250px;
}
.wide{
border:10px solid #aed;

}
.tall{
border:10px dashed #dea;

}
.square{
border:10px dotted #ade;

}

JavaScript

$(document).ready(function() {

    $('img').addClass('wide');

    $.each($('img'), function() {
        var image = $(this);
        var biggerVal = image.height() > image.width();
        var equalVal = image.height() == image.width();
        
        if ( biggerVal ) {
            
            image.removeClass('wide');
            image.addClass('tall');
            
        } else if ( equalVal ) {
            
            image.removeClass('wide');
            image.addClass('square');
            
        }

    });

});