`background-size: cover` and `background-position: center center` on img element with jQuery

index.html

<div class="img-container">
  <img src="http://placehold.it/550x800">
</div>

main.js

$(window).on('load resize', function() {
  $('.img-container').each(function() {
    var $img = $(this).children('img');
    var $container = $(this);
    var imgHeight = $img.outerHeight();
    var imgWidth = $img.outerWidth();
    var imgRatio = imgWidth / imgHeight;
    var containerHeight = $container.outerHeight();
    var containerWidth = $container.outerWidth();
    var containerRatio = containerWidth / containerHeight;

    //background-size: cover
    if(imgRatio > containerRatio) {
      $img.addClass('expand');
      imgHeight = $img.outerHeight();
      imgWidth = $img.outerWidth();
    } else {
      $img.removeClass('expand');
    }

    //background-position: center center
    $img.css('top', ((- imgHeight / 2) + (containerHeight / 2)) + 'px');
    $img.css('left', ((- imgWidth / 2) + (containerWidth / 2)) + 'px');
  });
});

style.scss

.img-container {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  &.expand {
    width: auto;
    height: 100%;
  }
  
  position: absolute;
}