JSFiddle - React, Tailwind, and code Playground

HTML

<h2>As Is</h2>
<div class="block"><img class="image" src="http://cs408228.vk.me/v408228507/6ec1/Z8IrLFQcroE.jpg"></div>
<div class="block"><img class="image" src="http://netwild.ru/wp-content/uploads/2014/04/j_Q9bdZohiA.jpg"></div>
<div class="block"><img class="image" src="http://cs622231.vk.me/v622231927/2cb04/ryWwCPWJ3jc.jpg"></div>

<h2>Cover</h2>
<div class="block cover"><img class="image" src="http://cs408228.vk.me/v408228507/6ec1/Z8IrLFQcroE.jpg"></div>
<div class="block cover"><img class="image" src="http://netwild.ru/wp-content/uploads/2014/04/j_Q9bdZohiA.jpg"></div>
<div class="block cover"><img class="image" src="http://cs622231.vk.me/v622231927/2cb04/ryWwCPWJ3jc.jpg"></div>

CSS

.block {
	overflow: hidden;
	display: inline-block;
	position: relative;
	z-index: 1;
	width: 200px;
	height: 200px;
	margin: 0 0 0 20px;
	box-shadow: 0 0 10px #ccc;
}
.image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cover .image {
	max-width: 100%;
	max-height: 100%;
}