如何在此代码中固定宽度和高度为％

Question

$(document).ready(function(){  
$image_crop = $('#upload-image').croppie({ 
    enableExif: true, 
    viewport: { 
     width: 300, 
     height: 250, 
     type: 'square' 
    }, 
    boundary: { 
     width: 350, 
     height: 300 
    } 
}); 

我想给百分比的宽度和高度。在上面的代码宽度和高度在PX。

Answer 1

不知道是否有可能为这一刻

下面就来打开问题的链接：https://github.com/Foliotek/Croppie/issues/280

不过，你可以尝试设置值，这样

viewport: { 
    width: 80 + '%', 
    height 80 + '%' 
} 

Answer 2

你不能放弃直接以百分比表示的height和width。 经过源并发现aupplied参数被以这种方式连接：

（https://github.com/Foliotek/Croppie/blob/188585563069754b60385e590e8767cb9b394302/croppie.js:369）

css(viewport, { 
     width: self.options.viewport.width + 'px', 
     height: self.options.viewport.height + 'px' 
    }); 

但是可以预先百分比转换为绝对值，然后将它传递

$(document).ready(function() { 
     function cropImage(widthPercentage, heightPercentage) { 
      var absWidth = (widthPercentage * $('#upload-image').width()) * 100; 
      var absHeight = (heightPercentage * $('#upload-image').height()) * 100; 
      $image_crop = $('#upload-image').croppie({ 
       enableExif: true, 
       viewport: { 
        width: absWidth, 
        height: absHeight, 
        type: 'square' 
       }, 
       boundary: { 
        width: 350, 
        height: 300 
       } 
      }); 
     } 
    });