JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="content" id="content">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.content {
    background-color: #dd0000;
    width: 300px;
    height: 600px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

JavaScript

var scaleX = 0;
var scaleY = 0;
var a = 1;


function fillDiv(div) {

    div.parent().css({
        "left": "auto"
    });

    currentWidth = div.width();
    scaleX = $(window).width() / currentWidth;

    currentHeight = div.height();
    scaleY = $(window).height() / currentHeight;

    if (($(window).height() / currentHeight) * currentWidth <= $(window).width()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleY * 100) + "%"
        });
    } else if (($(window).width() / currentWidth) * currentHeight <= $(window).height()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleX * 100) + "%"
        });
    }
}

$(document).ready(function() {
    fillDiv($("#content"));
});

$(window).bind("resize", function() {
    fillDiv($("#content"));
});