Jcrop image does not show correctly in preview

Question

I am currently using Jcrop to let a user crop an image. They can select an image, the image will get loaded into the and a thumbnail in to show what a cropped image would look like.

I had this working when I was testing it on localhost using a Wamp server, but as soon as i uploaded it to my wordpress side the preview went wrong. Here is a screenshot of what it looks like when it goes wrong: image The black lines show the total width of the thumbnail as you can see the crop selection is distorted and is going out of the thumbnail.

I have looked at the diffrence in inspect element on my localhost and my wordpress website and found that the width and height element of the is about half of the image that is being uploaded, on my localhost it gets the exact width and height of the image.

Here are my Jcrop settings i use and any other code that might be relevant:

$(document).ready(function(){
      $('#preview').Jcrop({
          onChange: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)},
          onSelect: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)},
          onRelease: function(){releaseCheck(minWidth, minHeight)},
          boxWidth: 400,
          bgColor: 'white',
          allowSelect: 'false',
          setSelect: [0, 0, minWidth, minHeight],
          minSize: [ minWidth, minHeight ],
          aspectRatio: minWidth/minHeight
      }, function(){
          jcrop_api = this;
          });
  $('#thumbnail-div').css({"width" : thumnailWidth, "height" : thumbnailHeight, "background-image" : "url(" + achtergrondLink + ")"});
  $('#thumbnail').css({"opacity" : "0.7"});
});

The minWidth and minHeight values are the minimum amount of pixels the crop selection should be otherwise the image will be too low resolution. The jcrop plugin will automatically calculate how to scale the image into the box. The thumbnailwidth and height are variables which are preset.

This is the showpreview function which will be executed everytime the crop area changes or will be selected.

function showPreview(c, origWidth, origHeight, thumnailWidth, thumbnailHeight){
        $('#x1').val(c.x);
        $('#y1').val(c.y);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        $('#w').val(c.w);
        $('#h').val(c.h);

        var rx = thumnailWidth / c.w;
        var ry = thumbnailHeight / c.h;

        $('#thumbnail').css({
            width: Math.round(rx * origWidth) + 'px',
            height: Math.round(ry * origHeight) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    }

Here is also a link with all the code I use I put everything into 1 file also the script tags. Full source code

Answer 1

After about 5 hours of searchng I finally found it, It turns out that some themes have this css in the style.css:

img {
max-width: 100%;
}

It turn out that if you have a thumbnail you have a with your full picture behind it and it has overflow hidden. so if you change the crop area on the preview the picture behind the thumbnail div will move around so it will look like your final product.

But when max-width: 100%; on all images is enabled the thumbnail actually scales to the div which it should not do.

So just disable max-width:100%; or set your own css to max-width: none !important