JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img_wrapper">
  <img src="http://www.noirkittymews.com/wp-content/uploads/2015/01/IMG_1376-180x90.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="http://www.bchumane.org/wp-content/uploads/2014/06/Cat-of-the-Week-Anna-large.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="https://lh3.googleusercontent.com/MEPCdADX5hpovKMR_GJjbAapiHR69mWcMM9M2KD2knCgvTi6cyeBfDbtB2y45y2qqA=w300" alt="">
  <img src="https://lh3.googleusercontent.com/MEPCdADX5hpovKMR_GJjbAapiHR69mWcMM9M2KD2knCgvTi6cyeBfDbtB2y45y2qqA=w300" alt="">
</div>

<!--  -->

<div class="img_wrapper js">
  <img src="http://www.noirkittymews.com/wp-content/uploads/2015/01/IMG_1376-180x90.jpg" alt="">
</div>
<div class="img_wrapper js">
  <img src="http://www.bchumane.org/wp-content/uploads/2014/06/Cat-of-the-Week-Anna-large.jpg" alt="">
</div>
<div class="img_wrapper js">
  <img src="https://lh3.googleusercontent.com/MEPCdADX5hpovKMR_GJjbAapiHR69mWcMM9M2KD2knCgvTi6cyeBfDbtB2y45y2qqA=w300" alt="">
</div>

CSS

.img_wrapper {
    position: relative;
    height: 100px;
    overflow: hidden;
    width: 150px;
    float: left;
    margin: 10px;
}
 
.img_wrapper img {
    display: block;
    min-height: 100%;
    min-width:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.js{
  background-size: cover;
  background-position: center center;
}
.js img{
  display: none;
}

JavaScript

$('.js').each(function(){
	var $this = $(this);
	var url = $this.find('img').attr('src');
	$this.css('background-image', 'url("' + url + '")');
});