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

Question

我修改了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, { 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>

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

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

完全像这里： https : //ibb.co/Twqxy2h

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

问题与这篇文章中的完全相同： Panzoom 库并用居中的图像填充 div

Answer 1

我想我已经解决了这个问题：

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)
    }
  })
}

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

问题描述

1 个解决方案

解决方案1
0 2021-07-09 09:16:49

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

问题描述

1 个解决方案

解决方案1 0 2021-07-09 09:16:49

解决方案1
0 2021-07-09 09:16:49