vue-advanced-cropper very wide image

Question

I am using the vue-advanced-cropper plugin with vue2. It works ok so far but I have a problem, when I upload a very wide image with a small height. I have an area of 240x240 pixels in which I want to crop an uploaded image. So an image where width < 240 should be resized to 240 and also an image with height < 240 should be resized so that it always fits into my 240x240 canvas.

How can I achieve this? With width it seems to work out of the box, but when I upload a very wide image, the result looks like this:

I cannot seem to get it to work, I tried imageRestriction="fill-area" or imageRestriction="fit-area" which makes absolutely no difference.

Here's my code:

<template>
    <div
        class="cropper-container"
        :style="{width: '240px', height: '240px'}"
    >
            
            <cropper
                :src="image.src"
                :check-orientation="false"
                @change="imageChange"
            />

            <div class="cropper-info-icon">
                <info-icon :text="'info icon text'" />
            </div>
    </div>
</template>

image.src is a blob, nothing special. How can I achieve this?

Answer 1

There is a predefined class in vue-advanced-cropper which will get the default uploaded image height(even if you define the height the container will take default image height), you can solve it by adding max-height for example:

    .fullscreen-cropper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100000;
    }

    .cropper-content {
        background: white;
        padding: 20px;
        border-radius: 5px;
        max-width: 70%;
        max-height: 99vh;
        z-index: 100001;
        position: relative;
    }

    .cropper {
        background: white;
        max-width: 100%;
        max-height: 90vh;
        z-index: 100001;
    }

    .button-wrapper {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .cropped-image {
        margin-top: 20px;
    }

    .cropped-image img {
        width: 100%;
        height: auto;
        max-height: 50%;
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #000;
        padding: 5px;
        outline: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js"></script>
<div class="fullscreen-cropper" @click="closeFullScreen">
    <div class="cropper-content" @click.stop>
        <Cropper v-if="selectedImage" ref="cropper" class="cropper" :src="selectedImage"
            :stencil-component="$options.components.Stencil" />
        <div class="button-wrapper">
            <button @click="closeFullScreen" class="btn btn-outline-danger btn-sm">cancel</button>
            <button @click="uploadImage" class="btn btn-outline-success btn-sm">Crop & Upload</button>
        </div>
    </div>
</div>