jquery - Jcrop 加载后压缩图像，应用错误的宽度

Question

我使用Jcrop来编辑用户上传的图像，当用户决定编辑他们的图像时，会进行AJAX调用来获取用户的原始图像，我的代码如下:

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

盒子被加载，模态被显示，图像被完美加载，但是一旦完成加载并且 Jcrop 开始播放，它会完全缩小宽度，留下大约 20px 宽的图像。

有人可以帮我解决这个问题吗，几乎 80% 的情况都会发生这种情况。干杯!

Answer 1

我找到了解决方案，问题是使用响应式网格，我使用 Twitter 的 Bootstrap 模式来显示图像裁剪，并且正文的 css 设置为 max-width: 100%；这个设置在获取图像的宽度和高度时使 Jcrop 感到困惑。因此，要解决这个问题，唯一需要做的就是使用 .jcrop 类或您喜欢的任何内容将图像包装在 DIV 中，并将 css 设置为:

.jcrop img {
   max-width: none;
}

这将解决问题，现在如果有人知道如何使 Jcrop 响应，我将非常感谢您的帮助。这里有更详细的讨论github pull

干杯!