Cropper.js，用居中的图像填充 div

问题描述

我修改了cropper.js 库网站(https://fengyuanchen.github.io/cropperjs/) 中的示例。

此示例的原始版本：https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html

我的版本：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,});
    }
    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>

我希望这些图片在上传时能够填充它们的 div，但要使其垂直和水平居中，但是：

如果图片为水平方向，则其高度不能高于 div
如果图像具有垂直方向，则其宽度不能大于 div。

就像这里：https://ibb.co/Twqxy2h

怎么做？我正在尝试不同的方法，但我的想法已经用完了。

问题与这篇文章中的完全相同：Panzoom library and filling a div with a centered image

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropperjs javascript