文章/答案/技术大牛

发布

社区首页 >问答首页 >Cropper.js，使用居中图像填充div。

问Cropper.js，使用居中图像填充div。
EN

Stack Overflow用户

提问于 2021-07-08 12:59:08

回答 1查看 661关注 0票数 0

我修改了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 library and filling a div with a centered image完全相同

cropperjs

javascript

css

回答 1

Stack Overflow用户

发布于 2021-07-09 09:16:49

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68302127

复制

相似问题

问Cropper.js，使用居中图像填充div。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cropper.js，使用居中图像填充div。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cropper.js，使用居中图像填充div。
EN