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

我想給百分比的寬度和高度。在上面的代碼寬度和高度在PX。如何在此代碼中固定寬度和高度爲%

+0

寬度:300 +'%';這是方式 –

回答

0

你不能放棄直接以百分比表示的heightwidth。 經過源並發現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 
       } 
      }); 
     } 
    }); 
相關問題