如何将任意宽高比的图片放入全屏弹出式div？

#popup-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-container {
  width: 500px;
  margin: 0 auto;
}

.popup-container img {
  max-width: 100%;
  max-height: 100%;
}

function resizeImage() {
  var container = document.querySelector('.popup-container');
  var image = container.querySelector('img');

  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;

  var originalWidth = image.naturalWidth;
  var originalHeight = image.naturalHeight;

  var containerRatio = containerWidth / containerHeight;
  var imageRatio = originalWidth / originalHeight;

  if (containerRatio > imageRatio) {
    image.style.width = containerWidth + 'px';
    image.style.height = 'auto';
    var imageHeight = image.offsetHeight;
    var marginTop = (containerHeight - imageHeight) / 2;
    image.style.marginTop = marginTop + 'px';
    image.style.marginLeft = 0;
  } else {
    image.style.height = containerHeight + 'px';
    image.style.width = 'auto';
    var imageWidth = image.offsetWidth;
    var marginLeft = (containerWidth - imageWidth) / 2;
    image.style.marginLeft = marginLeft + 'px';
    image.style.marginTop = 0;
  }
}

window.addEventListener('resize', resizeImage);