JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row-fluid" id="theContainer">
  <div class="col-sm-6 resizeMe">
    <img class="double-img filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <img class="double-img filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
  </div>
  <div class="col-sm-6">
    <img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
  </div>

CSS

.main-img {
  width: 100%;
  height: auto
}
.double-img {
  width: 100%;
  height: 50%;
}
.cover-img {
  background-size:cover;
  background-position: center center
}
#theContainer {
  margin-top: 15px;
  overflow: hidden;
}

JavaScript

document.initPictures = function() {
  $('.resizeMe,.cover-img').css({
    'height': $('#theContainer .col-sm-6').eq(1).height(),
    'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
  });
  $('.resizeMe img').each(function() {
    var src = $(this).attr('src');
    $('.resizeMe').append('<div class="cover-img" style="background-image: url(' + src + '); height: '+$(this).height()+'px;"' + '</div>');
    $(this).remove();
  })
};
document.resizePictures = function() {
  if ($('#theContainer').outerWidth() > 768) {
      calcHeight = $('#theContainer .col-sm-6').eq(1).height()
  } else {
      calcHeight = $('.resizeMe').outerWidth()
  }
  $('.resizeMe').css({
      'height': calcHeight
  });
  $('.cover-img').css({
     'height': calcHeight/2
  });
};
$(window).resize(function() {
  document.resizePictures();
});
document.initPictures();