Edit in JSFiddle

function SetRatio(e) {
    var opt = e.split(':');
    document.getElementById('ratio1').value = opt[0];
    document.getElementById('ratio2').value = opt[1];
    Calculate();
}

function Calculate(sender) {
    var ctrlToUpdate, callCtrl;

    if (sender && sender.target.id !== 'roundValues') {
        ctrlToUpdate = (sender.target.id === 'size1' ? document.getElementById('size2') : document.getElementById('size1'));
        callCtrl = sender.target;
    } else {
        ctrlToUpdate = document.getElementById('size2');
        callCtrl = document.getElementById('size1');
    }

    var resultVal = 0,
        baseVal = callCtrl.value;
    var ratio = {
        a: document.getElementById('ratio1').value,
        b: document.getElementById('ratio2').value
    };
    var values = {
        a: document.getElementById('size1'),
        b: document.getElementById('size2')
    };

    if (callCtrl.id === 'size2') {
        resultVal = (ratio.a / ratio.b) * values.b.value;
    } else {
        resultVal = values.a.value / (ratio.a / ratio.b);
    }

    if (document.getElementById('roundValues').checked) {
        ctrlToUpdate.value = Math.round(resultVal);
    } else {
        ctrlToUpdate.value = resultVal;
    }

}

window.onload = function() {
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();
        Calculate();
    }, false);

    document.getElementById('size1').addEventListener('input', Calculate);
    document.getElementById('size2').addEventListener('input', Calculate);
    document.getElementById('roundValues').addEventListener('change', Calculate);
}
<div class="wrap">
    <h1>Ratio Calculator</h1>
    <fieldset class="ratio">
        <legend>Select Ratio</legend>

        <input type="number" id="ratio1" value="16" /> :
        <input type="number" id="ratio2" value="9" />

        <p>Common ratios:</p>
        <ul class="option-buttons">
            <li><a onclick="SetRatio('16:9')">16:9</a></li>
            <li><a onclick="SetRatio('16:10')">16:10</a></li>
            <li><a onclick="SetRatio('4:3')">4:3</a></li>
        </ul>
    </fieldset>

    <fieldset class="ratio">
        <legend>Calculate Size (px)</legend>
        <form>
            <input type="number" id="size1" value="1920" step="1" /> &times;
            <input type="number" id="size2" value="1080" step="1" />
            <p>
                <label>
                    <input type="checkbox" id="roundValues" /> Round calculation value
                </label>
            </p>
            <p>The opposite value field will automatically update itself upon a value change.</p>

        </form>
    </fieldset>
</div>
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    overflow: hidden;
    text-align: center;
}

.wrap {
    width: 350px;
    margin: 0 auto;
}

fieldset {
    border: 1px solid grey;
    border-radius: 5px;
    text-align: center;
    background: white;
    margin: 1em 0;
}

legend {
    font-weight: bold;
    text-transform: uppercase;
    background: white;
    border-radius: 5px;
    padding: 5px;
}

fieldset.ratio input[type="number"] {
    width: 4em;
}

.option-buttons {
    list-style-type: none;
    padding: 0;
    margin: 1em 0;
}

.option-buttons li {
    display: inline-block;
    width: 30%;
}

.option-buttons li a {
    padding: .7em;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid grey;
    display: block;
    cursor: pointer;
    transition: .1s linear all;
}

.option-buttons li a:hover {
    background: lightgrey;
}

input[type="number"] {
    padding: .5em;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid grey;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 100%;
    z-index: -1;
}