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">1</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 = parseInt($('#height').val()) || 0;
        width = parseInt($('#width').val()) || 0;
        aspect = 0;
        if (width >= height) {
             aspect = width / height;

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

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

            $('#result').html(aspect + ' | ' + width + ' x ' + height);
            $('#crop').height(actuHeight);
            $('#crop').width(actuWidth);


        }


    });
});