JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <img class="image" src="http://paper.bl.ee/images/layer1.png">
</div>

CSS

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

  .image {
    vertical-align: middle;
  }

JavaScript

$(function() {

  "use strict";



  var container = document.querySelector(".container"),
      image = document.querySelector(".image"),
      primaryDirection,
      secondaryDirection,
      currentContainerRatio, // <-
      currentImageRatio; // <-



  $(window).on("load resize", function() {
    updatePrimaryDirection();

    switch (primaryDirection) {
      case "horizontal":
        image.style.width = "100%";
        image.style.height = "";
        break;
      case "vertical":
        image.style.width = "";
        image.style.height = "100%";
        break;
    }
  });

  setInterval(function() {
    var method;

    if (Math.abs(currentContainerRatio - currentImageRatio) < 0.2) { // <-
      return; // <-
    } // <-

    updateSecondaryDirection();

    switch (primaryDirection) {
      case "horizontal":
        method = "scrollTop";
        break;
      case "vertical":
        method = "scrollLeft";
        break;
    }

    switch (secondaryDirection) {
      case "positive":
        container[method] += 1;
        break;
      case "negative":
        container[method] -= 1;
        break;
    }
  }, 20);



  function updatePrimaryDirection() {
    var containerRatio = currentContainerRatio = container.offsetWidth / container.offsetHeight, // <-
        imageRatio = currentImageRatio = image.naturalWidth / image.naturalHeight; // <-

    if (containerRatio > imageRatio) {
      primaryDirection = "horizontal";
    } else {
      primaryDirection = "vertical";
    }
  }

  function updateSecondaryDirection() {
    var progress,
        min,
        max;

    switch (primaryDirection) {
      case "horizontal":
        progress = container.clientHeight + container.scrollTop;
        min = container.clientHeight;
        max = container.scrollHeight;
        break;
      case "vertical":
        progress = container.clientWidth + container.scrollLeft;
        min = container.clientWidth;
        max = container.scrollWidth;
        break;
   ...