JSFiddle - React, Tailwind, and code Playground

HTML

1:
<div class="container"><div><img class='img1' src="https://via.placeholder.com/100x50"></div></div>
2:
<div class="container"><img class='img2' src="https://via.placeholder.com/50x100"></div>
3:
<div class="container"><img src="https://via.placeholder.com/500x300"></div>
4:
<div class="container"><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

$( document ).ready(function() {
    jQuery("img").each(function(index, element) {
    
        var aspectRatio = $(element).width()/$(element).height();
        $(element).data("aspect-ratio", aspectRatio);

        if(aspectRatio > 1) {  
            $(element).addClass( "landscape" );
        } else if (aspectRatio < 1) {            
            $(element).addClass( "portrait" );
        } else {            
            $(element).addClass( "square" );            
        }
    })
});