Yüklendikten sonra Jcrop squashes image, yanlış genişlik uygular

Question

Kullanıcı tarafından yüklenen resimleri düzenlemek için Jcrop kullanıyorum, kullanıcı resim düzenlemeye karar verdiğinde, kullanıcının orijinal imajını almak için AJAX araması yapılıyor, kodum aşağıdaki gibi:

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

kutu, yüklenen kalıcı görüntülenir ve görüntü mükemmel yüklenen, ancak yükleme bittiğinde ve Jcrop yaklaşık 20 piksel genişliğinde bir görüntüsünü bırakarak tamamen genişliği küçülür oynamak konusunda bir kez.

Birisi bana bununla ilgili yardım edebilir, bunun gerçekleştiği zamanların yaklaşık% 80'i. Şerefe!

Answer 1

meraklı, sen denedin mi:

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

Answer 2

Bunun için çözüm bulundu, sorun Resim kırpmayı görüntülemek için, ben Twitter'ın Bootstrap modal kullanıyorum duyarlı şebekelerini kullanarak, ve için css vücut maksimum genişliğe ayarlanır:% 100; Bu ayar, görüntünün genişliğini ve yüksekliğini elde ederken Jcrop'u karıştırır. Bu herkes çevirmek bilen şimdi ise, konuyu çözecek

.jcrop img { 
    max-width: none; 
} 

: Bu nedenle ihtiyaç duyulan tek şey bu tercih sınıf .jcrop veya herhangi bir şeyle bir DIV görüntüyü kaydırmak ve css ayarlamak için çözmek Jcrop responsive Yardımı çok takdir ediyorum. Burada daha ayrıntılı bir tartışma var. github pull

Şerefe!