search

fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.76k stars 1.74k forks source link

Wrong image preview offset #15

Closed yanickrochon closed 10 years ago

yanickrochon commented 10 years ago

I am displaying the preview inside a Bootstrap dialog and if the image is not square, it is given a left offset :

Cropper Offset

fengyuanchen commented 10 years ago

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

yanickrochon commented 10 years ago

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.

fengyuanchen commented 10 years ago

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();
});