JSFiddle - React, Tailwind, and code Playground

HTML

<label for="width">width</label>
<input type="text" name="width" id="width" value=""/>
<label for="height">height</label>
<input type="text" name="height" id="height" value=""/>
<br />
<br />
<div >
        <div id="result"></div>    

<div id="outer">
<div id="crop"></div>

</div>
</div>

CSS

#outer{
    height: 500px;
    width: 300px;
    border: 1px black solid;
    padding-top:5px;
        padding-left:5px;
}

#crop {
 background-color: black;
}

JavaScript

$(document).ready(function() {

    $('#width,#height').keyup(function() {

        height = $('#height').val();
        width = $('#width').val();
        
        divHeight = $('#crop').parent().height();
        divWidth = $('#crop').parent().width();
        
        aspect = width / height;
        aspectInverse = height / width;
        
        divAspect = divWidth / divHeight;
        divAspectInverse = divHeight / divWidth;
        
        if (aspect > divAspect && aspectInverse < divAspectInverse && aspect < divAspectInverse && aspectInverse > divAspect) {
            $('#result').html('1');
            actuWidth = divWidth-5;
            actuHeight = actuWidth*aspect; 
        }
        else
        {
            $('#result').html('2');
            actuHeight = divHeight-5;
            actuWidth = actuHeight*aspect;
        }
        $('#crop').height(actuHeight);
        $('#crop').width(actuWidth);

    });
});