search

Agontuk / vue-cropperjs

A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
MIT License
937 stars 224 forks source link

Cropper ignores parent dimensions #38

Closed mrspence closed 6 years ago

mrspence commented 6 years ago

Thank-you for porting cropper.js over to Vue!

When using the vue component, I notice it ignores the parent dimensions, and forcefully overflows. Example below:

image

As you can see it's disappearing below the image where overflow: hidden is active. If i disable this style rule, then I can see the cropping container and cropping image falling outside of its 'boundaries'.

What would you suggest? I'm essentially looking for a way to force the cropping container to sit within the viewport.

Thank-you for your help!

mrspence commented 6 years ago

Realised this can be achieved with the containerStyle attribute, something like this:

<vue-cropper ref="cropper" :src="blob" alt="Section Image" :cropmove="cropImage" containerStyle="max-height:50vh"></vue-cropper>
Agontuk commented 6 years ago

Since you found a solution, I'm closing this.