JSFiddle - React, Tailwind, and code Playground

HTML

1:
<div class="container"><div><img class='img' src="https://via.placeholder.com/100x50"></div></div>
2:
<div class="container"><img class='img' src="https://via.placeholder.com/50x100"></div>
3:
<div class="container"><img class='img' src="https://via.placeholder.com/500x300"></div>
4:
<div class="container"><img class='img' src="https://via.placeholder.com/300x500"></div>

CSS

.container { width: 200px; height: 200px; background: blue; position:relative; }
img { 
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 margin:auto;
 max-width:100%;
 max-height:100%;
}
.landscape { 
 width:100%;
}
.portrait { 
 height:100%
}

JavaScript

var aaa = document.getElementsByClassName("img");
for (var i = 0; i < aaa.length; i++) {
    if (aaa[i].naturalWidth > aaa[i].naturalHeight) {
        aaa[i].className += " landscape";
    } else {
        aaa[i].className += " portrait";
    }
}