JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<img src='http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg' />
</div>
CSS
div {
width: 200px;
height: 300px;
border: 1px solid cyan;
}
img {
width: 100%;
}
JavaScript
$(function() {
var myImage = $('img'),
originalHeight = myImage.height();
getImgSize(myImage, originalHeight, myImage[0].src);
});
/* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
function getImgSize(myImage, currentHeight, imgSrc) {
var newImg = new Image();
newImg.onload = function() {
if(newImg.height > currentHeight) {
myImage.addClass('smaller');
alert(newImg.height + ' > ' + currentHeight);
}
}
newImg.src = imgSrc;
}