JCrop обрезает край изображения

Я использую jCrop для создания интерфейса, позволяющего пользователям обрезать изображения до фиксированной ширины и высоты. Он отображает исходное изображение (всегда шириной 940 пикселей с переменной высотой) и накладывает селектор jCrop сверху с фиксированной шириной и высотой (940 x 600). Затем пользователь может перемещать селектор вверх и вниз (а не влево и вправо, поскольку селектор имеет ту же ширину, что и исходное изображение) и выбирать часть. Обрезка работает нормально, за исключением одной вещи: исходное, предварительно обрезанное изображение (над которым отображается селектор jCrop) отсутствует несколько пикселей с левой стороны — оно больше похоже на ширину 935 пикселей. Таким образом, когда jCrop обрезает его, в результате получается тонкая черная рамка по левому краю. Код:

<script language="Javascript">
  jQuery(function($) {      

    $('#target').Jcrop({
      keySupport: false,
      minSize: [940,600],
      maxSize: [940,600],           
      setSelect: [0,0,940,600],
      onSelect: updateCoords
    });

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

  });
</script>

<img src="carousel.jpg" id="target" border="0" width="940" />

<form action="crop" method="post">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" value="Crop Image" />                            
</form>

Любые идеи высоко ценятся.

РЕДАКТИРОВАТЬ:

Глядя на сгенерированный источник, я вижу, что jCrop добавляет стиль «ширина: 935 пикселей» к отображаемому изображению. Но почему?

<img style="display: none; visibility: hidden; width: 935px; height: 701px;" src="carousel.jpg" id="target" border="0" width="940">
<div class="jcrop-holder" style="width: 935px; height: 701px; position: relative; background-color: black;">
<div style="position: absolute; z-index: 600; width: 940px; height: 600px; top: 0px; left: -5px;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 5px; width: 935px; height: 701px;" src="carousel.jpg">

РЕДАКТИРОВАТЬ 2:

Я использую Twitter Bootstrap. Из этой проблемы jCrop я вижу, что были конфликты, но проблема, описанная там, отличается от моей, и я пробовал решение max-width:none, которое они предлагают, но безрезультатно.


person GluePear    schedule 24.09.2013    source источник


Ответы (1)


В конце концов я исправил это, поместив изображение для обрезки в a и настроив его и его дочерние изображения как «ширина: 940 пикселей».

Я так и не выяснил, в чем причина проблемы, возможно, это был конфликт с Bootstrap.

person GluePear    schedule 25.09.2013