JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="container">
   <div class="row">
     <div class="col-xs-4">
       <div class="wrap">
         <div class="inner"><img src="http://placehold.it/350x150"></div>
       </div>
     </div>
     <div class="col-xs-4">&nbsp;</div>
     <div class="col-xs-4">
       <div class="wrap">
         <div class="inner"><img src="http://placehold.it/150x350"></div>
       </div>
     </div>
  </div><br>
  <div class="row">
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/600x150"></div>
      </div>
    </div>
    <div class="col-xs-4">&nbsp;</div>
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/150x600"></div>
      </div>
    </div>
  </div><br>
  <div class="row">
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/300x200"></div>
      </div>
    </div>
    <div class="col-xs-4">&nbsp;</div>
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/100x100"></div>
      </div>
    </div>
  </div><br>
  <div class="row">
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/3000x2010"></div>
      </div>
    </div>
    <div class="col-xs-4">&nbsp;</div>
    <div class="col-xs-4">
      <div class="wrap">
        <div class="inner"><img src="http://placehold.it/5000x50"></div>
      </div>
    </div>
  </div>
 </div>

CSS

.wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: rgba(255, 0, 0, 0.3);
  overflow: hidden;
}

.inner {
  position: absolute;
  min-width: 100%;
  height: 100%;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.inner img {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}