JSFiddle - React, Tailwind, and code Playground

HTML

<div class='images'>
  <div class='image'>
    <image src='https://placeimg.com/1000/300/any' />
  </div>
  <div class='image'>
    <image src='https://placeimg.com/300/1000/any' />
  </div>
</div>

SCSS

.image {
      position: relative;
      overflow: hidden;
      width: 50%;
      height: 200px;
      float: left;

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
}

JavaScript

var resize_images;

resize_images = function(resize) {
  var images, resize_process, resize_single;
  if (resize == null) {
    resize = false;
  }
  resize_single = function(that) {
    if (that.height() <= 200) {
      return that.css({
        'width': 'auto',
        'height': '100%'
      });
    } else {
      return that.css({
        'width': '100%',
        'height': 'auto'
      });
    }
  };
  resize_process = function(that) {
    that.css({
      'width': 'auto',
      'height': 'auto'
    });
    resize_single(that);
    return resize_single(that);
  };
  images = $('.image img');
  return images.each(function() {
    if (resize) {
      return resize_process($(this));
    } else {
      return $(this).on('load', function() {
        return resize_process($(this));
      }).each(function() {
        if(this.complete) $(this).trigger('load');
      });
    }
  });
};

resize_images();

$(window).resize(function() {
  return resize_images(true);
});