JSFiddle - React, Tailwind, and code Playground

by Khanh Le

HTML

<div class="container">
 <img src="https://picsum.photos/id/237/200/300" />
</div>
<br />
<br />
<div class="container">
 <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" />
</div>

CSS

.container {
    width: 40%;
    height: 40%;
    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() {
    		console.log(this.width, this.height);
        var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
        $(this).addClass(imgClass);
    })
})