Как переместить масштабированное изображение на основе CSS в браузере

Question

Я ходил кругами на этом.

У меня есть изображение, которое через css автоматически подстраивается под div, например

document.getElementById("quando_image").onclick = function() {
  var elem = document.getElementById("quando_image")
  elem.style.backgroundPosition = '0% 0%'
  return true
}

#quando_image {
  background-position-x: 50%;
  background-position-y: 50%;
}

#quando_image {
  background-image: url(https://homepages.cae.wisc.edu/~ece533/images/baboon.png);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(1.5);
}

<div id="quando_image"></div>

Когда вы нажимаете на изображение, оно перемещается влево (в окне браузера с альбомной ориентацией), но не перемещается вверх / вниз.

Если вы используете полную страницу и сужаете область просмотра, то она будет двигаться вверх, но не влево / вправо.

Я пробовал несколько методов - я могу сделать это, если уберу 'background-size: contains;' - но теперь изображение не масштабируется до размера области просмотра.

Примечание. Я рад решить вопрос настройки background-position-x / y в javascript (я использую% для своих целей), но я не хочу пересчитывать размер изображения каждый раз, когда изменяется область просмотра (например, если кто-то изменит размер окна браузера).