JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img src="http://lorempixel.com/800/600/nature/1">
</div>

<!-- Original Image -->
<img src="http://lorempixel.com/800/600/nature/1">

CSS

.container {
    position: relative;
    width: 25%;
    /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff;
    /* just to separate the images */
    overflow: hidden;
    /* "crop" the image */
    background: #000;
    /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%;
    /* all images at least fill the height */
    top: 50%;
    /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

JavaScript

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({
    height: h + 'px'
});