JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<header></header>
<div id="profiles" class="container">
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/750" alt="">
			</div>
			<div class="detail">
			</div>
		</div>
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/750" alt="">
			</div>			
			<div class="detail">
			</div>
		</div>        
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/750" alt="">
			</div>			
			<div class="detail">
            </div>
		</div>
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/750" alt="">
			</div>			
			<div class="detail">
			</div>
		</div>        
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/750" alt="">
			</div>			
			<div class="detail">
			</div>
		</div>
		<div class="profile">
			<div class="image">
                <img src="http://placekitten.com/g/750/1200" alt="">
			</div>			
			<div class="detail">
			</div>
		</div>            
</div>

CSS

#profiles {
	margin-top: 300px;
	transform:skewY(-30deg);
	-ms-transform:skewY(-30deg); /* IE 9 */
	-webkit-transform:skewY(-30deg); /* Safari and Chrome */	
}
.profile {
	cursor: pointer;
	float: left;
	width: 32.25%;
	margin: 0.5%;
	position: relative;
}
.profile .image {
    position: relative;
	overflow: hidden;
	height: 400px;
	background: #000;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden; /* Chrome and Safari */
	-moz-backface-visibility:hidden; /* Firefox */
	-ms-backface-visibility:hidden; /* Internet Explorer */		
}
.profile .image * {
	position: relative;
	transform:skew(0deg,30deg);
	-ms-transform:skew(0deg,30deg); /* IE 9 */
	-webkit-transform:skew(0deg,30deg); /* Safari and Chrome */			
}
@media screen and (max-width: 400px){
	.profile {
		width: 100%;
		margin: 0;
	}
}

JavaScript

/*
* Plugin Name: Resize Image to Parent Container
*
* Author: Christian Varga
* Author URI: http://christianvarga.com
*
*/
 
jQuery.fn.resizeToParent = function(options) {
var defaults = {
parent: 'div'
}
 
var options = jQuery.extend(defaults, options);
 
return this.each(function() {
var o = options;
var obj = jQuery(this);
 
// bind to load of image
obj.load(function() {
// dimensions of the parent
var parentWidth = obj.parents(o.parent).width();
var parentHeight = obj.parents(o.parent).height();
 
// dimensions of the image
var imageWidth = obj.width();
var imageHeight = obj.height();
 
// step 1 - calculate the percentage difference between image width and container width
var diff = imageWidth / parentWidth;
 
// step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
if ((imageHeight / diff) < parentHeight) {
obj.css({'width': 'auto', 'height': parentHeight});
 
// set image variables to new dimensions
imageWidth = imageWidth / (imageHeight / parentHeight);
imageHeight = parentHeight;
}
else {
obj.css({'height': 'auto', 'width': parentWidth + 50});
 
// set image variables to new dimensions
imageWidth = parentWidth;
imageHeight = imageHeight / diff;
}
 
// step 3 - center image in container
var leftOffset = (imageWidth - parentWidth) / -2;
var topOffset = (imageHeight - parentHeight) / -2;
 
obj.css({'margin-left': leftOffset, 'margin-top': topOffset});
});
 
// force ie to run the load function if the image is cached
if (this.complete) {
obj.trigger('load');
}
});
}

$('.image img').resizeToParent();

$(window).on('resize', function(){
    $('.image img').resizeToParent();
});