JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<html>
<head></head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>    
</body>
</html>

CSS

#outer {
    background-color: #000000;
    width: 800px;
    height: 800px;
}

#inner {
    background-color: #ff0000;
    width: 768px;
    height: 432px;
    position: absolute;
}

JavaScript

function findPreferredRatio(width, height, maxWidth, maxHeight) {
    var dw = maxWidth / width;
    var dh = maxHeight / height;
    return dw < dh ? dw : dh;
}

var $outer = $('#outer');
var $inner = $('#inner');

var outerWidth = $outer.width();
var outerHeight = $outer.height();

var innerWidth = $inner.width();
var innerHeight = $inner.height();

var ratio = findPreferredRatio(innerWidth, innerHeight, outerWidth, outerHeight);


$inner.width(innerWidth * ratio);
$inner.height(innerHeight * ratio);

$inner.css('left', ((outerWidth - $inner.width()) / 2));
$inner.css('top', ((outerHeight - $inner.height()) / 2));