JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="profile_cover_container">
  <div class="cover_container">
    <div class="cover_img">
        <a href="#"><div class="img_200px200px"><img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" /></a></div>
          <a href="#"><div class="img_200px200px"><img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" /></a></div>


      </div>
  </div>


</div>

CSS

.profile_cover_container{
  position:relative;
  width:851px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  border:1px solid #d8dbdf;

  -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
  margin-top:3px;
}
.cover_container {
  width:851px;
  height:400px;
  float:left; 
}
.cover_img {
  float:left;
  width:200px;
  height:400px; 
  background-color:#000;
}
.img_200px200px {
  float:left;
  width:198px;
  height:198px;
  margin:1px;
  overflow: hidden;
}

.img_200px200px img {
   width: 100%;
}
.img_200px200px img.height {
   width: auto;
   height:100%;
}

JavaScript

$('.img_200px200px img').each(function() {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
        var middle = 0 - (image.width() - image.closest('.img_200px200px').width()) / 2;
        image.css('margin-left', middle + 'px');
    } else {
        var middle = 0 - (image.height() - image.closest('.img_200px200px').height()) / 2;
        image.css('margin-top', middle + 'px');
    }
});