Cropper: set container height..?

[bilginnet]

i want to set container height to canvas height in modal?
i have custom modal. when i create cropper in modal my view like this in added image

i want to set contianer height to canvas height. Becouse my modal height getting long when i load big image in modal ..

and my code is here

    $image.cropper({
        aspectRatio: myAspectRatio
        viewMode: 2,            
        autoCropArea: 0.5,            
        built: function () {
            croppable = true;                
        }
    });

I am sorry for my english;

[fengyuanchen]

Just set the follow styles:

img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

[BagasMuharom]

It doesn't work in my code

[FritzTGreen]

Were you able to solve this issue?

It is very annoying that the height of the container is always equal to the original height of the image even when the image is downsized by setting a max-width on the container.

Setting max-width 100% on the image does not solve this problem, actually it creates it.

[fengyuanchen]

Steps to use Cropper:
1 - Check if the original image is displayed correctly in its place?
2.1 - Yes! Go to 3.
2.2 - No! Regulate the image to fit your expectation. Go to 3.
3 - Apply copper on the image.

[jgarcia99]

This still an issue and very annoying I don't understand how this issue was closed...

[TheBearSO]

The only way that you can solve it is adding a parent div with a fixed height or a max height.

<div style="max-height: 400px">
    <img id="imageToCrop" src="myImage.png" />
</div>

[suresh2018]

original image size not working

[placetrend]

Took me a few hours to finally figure out the solution. Turns out its something extremely simple. Simply add height="auto" width="100%" to the image itself. Fixes the problem instantly. For example:

<div id="image_container">
<img id="image" src="myImage.png" height="auto" width="100%">
</div>

The problem is from us, NOT from the author of the plugin. In order to control the height of the container, we need to make the image itself responsive (to fit the image to the size of its parent container). Once the image is responsive, the height of the container automatically conforms to the height of the image.

[luvletter2333]

The only way that you can solve it is adding a parent div with a fixed height or a max height.

<div style="max-height: 400px">
    <img id="imageToCrop" src="myImage.png" />
</div>

i sovle this problem by your method. thanks

[sumitmangela]

If you are using cropper in a modal after uploading it using form and having this problem, here is the solution:
give image max-height of some fixed pixel like 300px.

<img id="profile_preview" src="" class="" style="max-height: 300px;" alt="Profile Pic">

[kinhhopbi0]

Just set the follow styles:

img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

I use with @type, react, . It work for me

[alexoooo]

Had a similar issue, fixed by adding position: relative to the container:
```