Allow specifying viewport sizes as relative, e.g. 80%

[simondrabble]

From the code:

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

It would be super helpful if the width and height could be specified as percents of the boundary size, or perhaps have them exposed via CSS directly.

[thedustinsmith]

Looks like we do it for boundary ... just not viewport ... that wouldn't be too hard of a change to make.

See: https://github.com/Foliotek/Croppie/blob/master/croppie.js#L348

[Hesesses]

Any updates this? I would like to have the viewport the same size as the boundary (100%)

[thedustinsmith]

@Hesesses Doesn't appear to be any updates. I would be open to a pull request, as it appears to be a simple change to make.

[alimemonzx]

@thedustinsmith Could you please tell me, How to make this specific change?

I want my editor to be responsive on every mobile device.

[thedustinsmith]

@alimemonzx You can create a fork and try try copying the behavior we use for the boundary: https://github.com/Foliotek/Croppie/blob/master/croppie.js#L385

... and make the viewport do something similar: https://github.com/Foliotek/Croppie/blob/master/croppie.js#L394

This would allow you to do:

var croppie = new Croppie(element, {
  viewport: { width: '80%', height: '80%' },
  boundary: { width: '100%', height: '100%' },
  //etc
});

That will at least configure the UI how I imagine you'd like it. When it comes to grabbing the result - I don't know what will happen, but feel free to experiment.