scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 304 forks source link

Issue with the height of a dropped image #116

Closed kylescousin closed 8 years ago

kylescousin commented 8 years ago

Hi there,

When dropping an image it has a height if 0. Screenshot: http://i.imgur.com/lkmFoXh.jpg

I've used cropit on several other places without problems, but in this case, the height seems to be set to 0 for some reason. Any idea what could be causing this?

JS:

$imageCropper.cropit({
            imageBackground: true,
            smallImage: 'allow',
            minZoom: 'fill',
            initialZoom: 'image',
            maxZoom: 1,
            exportZoom: 2,
            freeMove:false,
            fitHeight:true,
            smallImage: 'allow',
            onImageLoaded: function() {
                $imageCropperPreview.text('');
                $imageCropperPreview.css({'cursor' : 'all-scroll'});
                $imageCropper.css('background', 'none');
                $imageCropperPreview
                    .removeClass('drag')
                    .removeClass('nodrag')
                .addClass('dropped');
                $imageCropperSlider.removeClass('hide');

            }
        });
    }

    console.log($imageCropper);

css:

 .cropit-image-preview {
        width       : 240px;
        height      : 150px;
        line-height: 150px;
        color       : $baseColor;
        font-weight : $lightFontWeight;
        font-size   : 12px;
        text-align  : center;
      }
<div class="big avatar-cropper">
                <p>480x300</p>
                <div class="cropit-image-preview">
                    Drop here
                </div>
                <div class="slider-wrapper hide">
                    <input type="range" class="cropit-image-zoom-input"/>
                </div>
                <input type="file" class="cropit-image-input hide"/>
            </div>