test image dimensions

by spacexplorer

HTML

<div class="container">
 <img src="http://placehold.it/900x600&text=900x600" />
</div>
<br />
<br />
<div class="container">
 <img src="http://placehold.it/600x800&text=600x800" />
</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() {
        var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
        $(this).addClass(imgClass);
    })
})