Wrong image preview offset about cropper

[fengyuanchen]

The size of the cropper container is depended on the target image's parent element. So you can add a wrapper for your img tag. With Bootstrap Modal component, you can try this:

HTML:

<div id="crop-modal" class="modal">
    ...
    <div class="modal-body">
        <div class="img-wrapper">
            <img src="example.jpg">
        </div>
    </div>
    ...
</div>

Javascript:

$("#crop-modal").on('shown.bs.modal', function () {
    $(".img-wrapper img").cropper();
});

[fengyuanchen]

Can you get me a URL or a demo to try it?

[yanickrochon]

You can reproduce by setting up any example inside a Bootstrap 3 Modal dialog. Unfortunately, I had to switch to Jcrop as I have to respect my deadlines and have to move on with this.

(Note : Jcrop also had problems with Bootstrap--with image sizes--, but it was Bootstrap's problem on that one.)

AFAIK, this problem may lie in the fact that cropper is using the container's parent to calculate the width, and center the image.