<div class="object-fit"> <img src="http://lorempixel.com/400/200/" width="400" height="200"> </div>
<div class="object-fit"> <img src="http://lorempixel.com/200/400/sports" width="400" height="200"> </div>
<div class="object-fit"> <img src="http://lorempixel.com/400/200/" width="400" height="200"> </div>
<div class="object-fit"> <img src="http://lorempixel.com/100/200/sports" width="400" height="200"> </div>
<div class="object-fit of2"> <img src="http://lorempixel.com/500/100/sports" width="400" height="250"> </div>
<div style="clear:both"><a href="https://codepen.io/paulobrien/pen/zPgqNa" target="_blank">See demo using object fit just for comparison</a></div>

.object-fit {
	width:20%;
	float:left;
	margin:1%;
	border:1px solid #000;
	position: relative;
	height: 500px;
	overflow: hidden;
}
.object-fit img {
	position: absolute;
	top:50%;
	left:50%;
	height:auto;
	width:auto;
	min-width:100%;
	min-height:100%;
	transform:translate(-50%, -50%);
}
@supports (object-fit: cover) {
  .object-fit img  {
    position: static;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
  }
}

.of2 {
	width:50%;
	float:none;
	clear:both;
	margin:25px auto;
}