JSFiddle - React, Tailwind, and code Playground

by radar24

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="croppreview"></div>

</div>
</div>

CSS

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

#croppreview {
 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 = $('#croppreview').parent().width() - 10;
            actuHeight = (actuWidth / aspect);
            $('#croppreview').height(actuHeight);
            $('#croppreview').width(actuWidth);
        } else {
            aspect = height / width;

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


        }


    });
});