JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div id="outer">
    <div class="box">
        <div id="camera_view"></div>
    </div>
</div>

CSS

.box {
    position:relative;
    background: #A2E8A7;
    margin: 0px auto;
}
.box-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#outer {
    display: flex;
    position: relative;
    width: 100%;
    height: 60vh;
    align-items: center;
}

JavaScript

function setAspectRatio(){
    var outer = $('#outer');
    var box = $('.box');

    if (outer.height() > outer.width() * 0.5625) {
        box.css({'width': '100%'});
        box.css({'height': box.width() * 0.5625});

    } else {
        box.css({'height': '100%'});
        box.css({'width': box.height() / 0.5625});
    }
}

$(document).ready(function() {
    setAspectRatio();

    $(window).resize(function() {
        setAspectRatio();
    })
})