JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src='http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg' />
</div>

<div style='height: 150px;'>
    <img src='http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg' />
</div>

CSS

div {
    float: left;
    width: 200px;
    height: 300px;
    overflow: hidden;
    border: 1px solid cyan;
}
img {
    width: 100%;
}
.smaller {
    background-color: chocolate;
}

JavaScript

$(function() {
        var myImage = $('img');
        
        getImgSize(myImage);
    });
    
    /* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
    function getImgSize(myImage) {
        myImage.each(function() {
            var that = $(this),
                parent = that.parent(),
                originalHeight = that.height(),
                parentHeight = parent.height(),
                newImg = new Image();
    
            newImg.onload = function() {
                if(
                    newImg.height > originalHeight &&
                    parentHeight > originalHeight
                ) {
                   that.addClass('smaller');
                }
            }
        
            newImg.src = that[0].src;
        });        
    }