JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centered-container">
    <div class="center-cropped-img">
        <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
    </div>
    <div class="center-cropped-img">
        <img src="http://i.imgur.com/BQUgmlB.png" alt="" />
    </div>
</div>

CSS

.centered-container {
    max-width: 960px;
    margin: auto;
}
.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}
.center-cropped-img img {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

JavaScript

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

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

function heightMan() {
    var winHeight = $(window).height();
    var winHeight_50 = (winHeight / 2) - 20;
    console.log(winHeight);

    var container_node = $('.center-cropped-img');
    var container_height = container_node.height();
    container_height = winHeight_50;
    console.log(container_height);

    container_node.css('height', container_height);
}