JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>

CSS

.container {
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

JavaScript

$(window).load(function() {
    $('.container').find('img').each(function() {
        var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
        $(this).addClass(imgClass);
    })
})