Responsive sizing

[gl-pasci]

Hi! Thanks for the great library

I was investigating why the canvas wouldn't respect my style rules and stumbled on this function

cropper.vue:562

_setSize: function _setSize() {
  this.canvas.width = this.outputWidth;
  this.canvas.height = this.outputHeight;
  this.canvas.style.width = (this.useAutoSizing ? this.realWidth : this.width) + 'px';
  this.canvas.style.height = (this.useAutoSizing ? this.realHeight : this.height) + 'px';
},

Changing the last two lines to

this.canvas.style.width = '100%';
this.canvas.style.height = 'auto';

decouples the canvas real size from the styling and makes it responsive.

Perhaps I'm missing something but the auto-sizing prop you added is not respecting the correct aspect ratio.

Edit:

Since I don't want to edit the package source, I'm now setting the right canvas size on the init event

const canvas = croppa.getCanvas()
canvas.style.height = 'auto'
canvas.style.width = '100%'

I've not tested on every browser, but it should work.

[ghost]

The auto-sizing prop didn't work for me, but this did. Many thanks for posting your solution. I'll report back if there's something I discover that prevents it from working.

Thanks @gl-pasci :)

[Paulsky]

Thank you @gl-pasci 🙏 This also works (for me) with fixed output width and/or height. So this is a solution for me for issue #122