Jcrop squashes image after loaded, applies wrong width

Question

I'm using Jcrop to edit images uploaded by users, when a user decides to edit their image, an AJAX call gets made to get the original image of the user, my code is as follows:

var jcrop_api;

$('.edit_image').on('click', function(e)
{
  var url = $(this).attr('data-url');

  e.preventDefault();

  $.ajax({
    url: url,
    type: 'GET',
    cache: false,
    beforeSend: function()
    {
      // Remove old box in case user uploaded new image bring the latest one
      $('#edit_box').remove();
    },
    success: function(result)
    { 
      if (result.error)
      {
        alert(result.error);
      }
      else
      {

        $('.edit_image_box').html(result);
        $('#edit_box').modal({ show: true});

        $('#original_img').load( function()
        {
          $(this).Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords,
            boxWidth: 700,
            boxHeight: 700
          }, function()
          {
            jcrop_api = this;
          });
        });
      }
    }
  })
});

function updateCoords(c)
{
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
};

function checkCoords()
{
  if (parseInt($('#w').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

The box gets loaded, the modal is displayed and the image gets loaded perfectly, but once it finishes loading and Jcrop comes to play it shrinks the width completely, leaving an image of about 20px wide.

Can someone please help me with this, almost 80% of the times this happens. Cheers!

Answer 1

I found the solution for this, the problem is with using responsive grids, I'm using Twitter's Bootstrap modal to display the image cropping, and the css for the body is set to max-width: 100%; this setting confuses Jcrop when obtaining the width and height of the image. Therefore to solve this the only thing needed is to wrap the image in a DIV with class .jcrop or anything you prefer and set the css to:

.jcrop img {
   max-width: none;
}

this will solve the issue, now if anybody knows how to turn Jcrop responsive I would much appreciate the help. Here is a more detailed discussion github pull

cheers!