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: 640px;
    height: 360px;
    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%;
}