Responsive Sizing

[wunderdojo]

Thanks a ton for your library, it was exactly what I needed for a project and works beautifully. One thing I ran into -- and I might just be missing an option or something -- is that the width and height only take pixel values, not percentages. I'm opening croppa in a modal window and depending on the screen size I need it to adjust accordingly. In other words, if someone is using it on a phone it needs to be much smaller than if they're on a large monitor.

What I've done for now is used a method that sets the width and height dynamically when the modal is opened. In this example I want a 1:1 aspect ratio so I use the same value for width and height:

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

this.croppaWidthHeight = ( width < 600 ) ?  width * .6 : width * .3;

I could use a series of if / else statements to adjust for various breakpoints but this works for my current use case. Is there a better way of making it responsive?

[zhanziyang]

Currently the only way is to set it dynamically like what you did. I will improve this very soon.

So what we need is let croppa automatically adjust its size to fit a container whose size can be controlled with CSS. Is that right? So that you can make it responsive just like how you make a normal block element responsive.

[wunderdojo]

That would be ideal.

[zhanziyang]

@wunderdojo Checkout new version 1.3.0. With the new prop auto-sizing set to true, croppa automatically adjust itself to its container div's size.

DEMO: https://codepen.io/zhanziyang/pen/bvVKzL

[evrenbal]

@wunderdojo Checkout new version 1.3.0. With the new prop auto-sizing set to true, croppa automatically adjust itself to its container div's size.

DEMO: https://codepen.io/zhanziyang/pen/bvVKzL

Thank you for the update, however it doesn't work as expected when the parents box-sizing is set to border-box and has a border. (Especially if it has a thick border)