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();
        aspect = 0;
        if (width >= height) {
             aspect = width / height;

            actuWidth = $('#crop').parent().width() - 5;
            actuHeight = (actuWidth / aspect);

            $('#result').html(aspect + ' | ' + width + ' x ' + height);
            $('#crop').height(actuHeight);
            $('#crop').width(actuWidth);
            
            if (actuHeight > $('#crop').parent().height()) {
                actuHeight = $('#crop').parent().height()-5;
                actuWidth = actuHeight*aspect;
            }
            
        } else {
            aspect = height / width;

            actuHeight = $('#crop').parent().height() - 5;
            actuWidth = (actuHeight / aspect);

           
            if (actuWidth > $('#crop').parent().width()) {
                actuWidth = $('#crop').parent().width()-5;
                actuHeight = actuWidth*aspect;
            }
            $('#crop').height(actuHeight);
            $('#crop').width(actuWidth);


        }


    });
});