Search code examples
javascriptjqueryhtmlcsscroppic

Croppic.net wrong image dimensions and not able to crop

I am using croppic.net to enable the user to perform a simple image cropping before uploading. The problem is the image inside the cropping container is always deformed.enter image description here

Due to this i cannot crop the image correctly and it is not possible to drag the image farther to the right to crop of parts from there. The image x-width always stays the same as the width of the container even when I zoom in.

The css I'm using:

#croppicContainer{
    width: 300px;
    height: 300px;
    position: relative;
}

Html (using foundation):

<div class="row">
    <div class="large-4 columns">
        <div id="croppicContainer"></div>
    </div>
</div>

And the Js which preloads the image and should initialize the crop:

var cropperOptions = {
    cropUrl: 'path_to_your_image_cropping_file.php',
    loadPicture: '../../img/provider-logos/5000_logo.jpg'
};

var cropperHeader = new Croppic('croppicContainer', cropperOptions);

The croppic.js is loaded and the javascript of me inline at the end of the page; so there should be no problem there.

Solution

  • I feel stupid now. The problem was the usage of Zurb Foundation, which has a css class

    img{
    max-width: 100%;
}

    which caused the deformation and inablility to crop

    Just posting this if somone else makes this mistake.