Q: Cropper.js, filling a div with a centered image I modified the example from the cropper.js library website (https://fengyuanchen.github.io/cropperjs/).
Original version of this example: https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html
My version: https://codepen.io/reti/pen/ExmyyaX


 var image1
    var cropper1
    var image2
    var cropper2

    function cropperInstances() {
      image1 = document.querySelector('#image1');
      cropper1 = new Cropper(image1, {
        dragMode: 'move',
        aspectRatio: 1 / 1,
        restore: false,
        guides: false,
        center: true,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
        minCropBoxWidth: 300,
        minCropBoxHeight: 300,

      });

      image2 = document.querySelector('#image2');
      cropper2 = new Cropper(image2, {
        dragMode: 'move',
        aspectRatio: 1 / 1,
        restore: false,
        guides: false,
        center: true,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
        minCropBoxWidth: 300,
        minCropBoxHeight: 300,

      });
    }
    window.addEventListener('DOMContentLoaded', cropperInstances);
.container {
      margin: 100px auto;
      width: 300px;
      height: 300px;
    }

    img {
      max-width: 100%;
    }
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Cropper.js</title>
  <link rel="stylesheet"
        href="https://srv19859.microhost.com.pl/cropper/css/cropper.css">
</head>

<body>
  <div class="container">
    <img id="image1"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/1200px-Lion_waiting_in_Namibia.jpg">
  </div>
  <div class="container">
    <img id="image2"
         src="https://upload.wikimedia.org/wikipedia/de/9/93/Burj_Khalifa.jpg">
  </div>
  <script
          src="https://srv19859.microhost.com.pl/cropper/js/cropper.js"></script>

</body>

</html>


I would like these images, when uploaded, to fill their divs, but so that they are centered vertically and horizontally, but:

*

*if the image has a horizontal orientation, its height cannot be higher than the div

*if the image has vertical orinetation, then its width cannot be greater than the div.

Exactly like here: https://ibb.co/Twqxy2h
How to do it? I'm trying different ways and I'm already running out of ideas.
The problem is exactly the same as in this post: Panzoom library and filling a div with a centered image

A: I think I've solved the problem:
function fillCropContainer() {
  var instanceArray = [cropper1, cropper2]
  var ratio
  instanceArray.forEach((el) => {
    var imgNatHeight = el.imageData.naturalHeight
    var imgNatWidth = el.imageData.naturalWidth
    if (imgNatHeight < imgNatWidth) {
      ratio = 300 / imgNatHeight
      el.zoomTo(ratio)
    } else {
      ratio = 300 / imgNatWidth
      el.zoomTo(ratio)
    }
  })
}

