Cropper component not respecting parent's size

[cryo75]

I have a cropper component in a column:

<div class="row">
    <div class="col-sm-12 col-md-9">
        <CropperComponent @ref="cropperRef"
                            Class="img-container"
                            Src="@Model.Path"
                            InputAttributes="@InputAttributes"
                            Options="cropperOptions" />
    </div>
</div>

And the CSS class:

.img-container,
.img-preview {
    text-align: center;
    width: 100%;
}

.img-container {
    height: 400px;
}

.img-preview {
    overflow: hidden;
}

.img-container > ::deep img {
    max-width: 100%;
}

.img-preview > ::deep img {
    max-width: 100%;
}

.preview {
    height: 200px;
    width: 150px;
}

When setting a large image, the component just expands (width & height) to fit image.

Is it possible to make the component respect its size defined in the css and/or the its parent?

[MaxymGorn]

Hi @cryo75. You can experimenting with ViewMode for Cropper Component. See details instruction in this page: https://cropperblazor.github.io/examples/viewmodes#simple-usage

Actually you can set up min and max dimensions in the following instruction with example of code:

Moreover you can see code base of demo part site and find suitable combination: https://cropperblazor.github.io/demo