JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTmz5uo5mCCab-mCxueyW6nvEv-Y8AVI58Y2WYmwwVGrCBhKFFMxg"></div>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEber0z-4l7590XFfg_pRTX3Gl6-sYLmLIrrSNKn2tbHTeHf8F"></div>
    <div><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBnkKvffHqzj3INyaZNxS7DXnd9xdquGBzLJHDqWijAhbpLTrI"/></div>

CSS

div{
    width:300px;
    height:200px;
    background:#333;
}

JavaScript

$('img').on('load', function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio<pratio) css={width:'auto', height:'100%'};
    else css={width:'100%', height:'auto'};
    console.log(ratio, pratio, css);
    $(this).css(css);
    
});