jQuery 이미지 크기 조정 - 너비가 맞지 않습니다.

Question

크기를 조정하고 이미지를 드래그 할 수있는 배너를 만들려고합니다. 크기 조정을 제외한 모든 작업이 정상적으로 작동합니다.

이미지 아래의 슬라이더로 이미지의 크기를 조정할 때. 이미지가 커집니다. 이미지의 크기를 조정 한 후에는 오른쪽과 아래쪽으로 이미지를 성공적으로 드래그 할 수 있습니다. 이미지를 오른쪽으로 끌면 이미지를 다시 작게 만들기로 결정했습니다. 이미지 아래의 슬라이더를 사용할 수 있습니다. 그러나 이제는 문제가 온다. 이미지의 오른쪽에 있고 이미지의 크기를 다시 조정하려는 경우 이미지가 div에 맞지 않습니다. 검은 색 배경이 보입니다. http://jsfiddle.net/DennisBetman/tnaGA/

HTML :

<div id="box"> 
    <img src="http://www.digindigin.com/blog/wp-content/uploads/2012/05/Diablo_3___Wizard_Wallpaper_by_Lythus.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" /> 
</div> 
<!-- style="top:-262px; left:-425px;" --> 
<div id="zoom"></div> 
<input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" /> 
<input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" /> 

<div class="text"></div> 

<p> 
    Position x: 
    <input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 
<p> 
    Position y: 
    <input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 

jQuery를 :

jQuery("#zoom").slider({ 
     max: 650, 
     slide: function(){ 

     var sliderValue = jQuery("#zoom").slider("value"); 
     jQuery("#img").width(370 + sliderValue); 

     $("#amount-width").val(jQuery("#img").css("width")); 
     $("#amount-height").val(jQuery("#img").css("height")); 

     var width = $("#img").width(); 
     var widthZoom = width + sliderValue; 
     var widthVerschil = widthZoom - sliderValue; 
     var totalWidth = widthVerschil - '373'; 

     var stageWidth = $("#box").width(); 

     var height = $("#img").height(); 
     var totalHeight = height - '207'; 

     $("#img").draggable({ 
      containment: [-totalWidth, -totalHeight, 0, 0], 
      scroll: false, 
      iframeFix: true, 
     }); 
     $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil); 
     } 


}); 

var height = $("#img").height(); 
var totalHeight = height - '207'; 

$("#img").draggable 
({ 
    containment: [0, -totalHeight, 0, 0], 
    snap: false, 
    drag: function(event, ui) 
    { 
     $("#val-x").val(ui.position.left); 
     $("#val-y").val(ui.position.top); 

    } 

}); 

$("#img").offset({left: $(this).attr('position')}); 

CSS :

여기

은 예입니다

div { 
    width:370px; 
    height:204px; 
    position:relative; 
    overflow:hidden; 
    border-top-left-radius: 7px; 
    border-top-right-radius: 7px; 
} 

#box{ 
    background:black; 
} 


#img{ 
} 

누군가가 나를 도울 수 있기를 바랍니다.

인사말, 데니스.

Answer 1

이러한 라인을 따라 뭔가를하려고 나는 당신의 바이올린에 일부 코드를 추가하고, 나는 그것이 ... 지금 작동하는 것 같군 생각
바이올린 : http://jsfiddle.net/tnaGA/28/

슬라이더 초기화하기 전에 :

var previousValue = 0; 

슬라이드 이벤트에 대한 이벤트 처리기 함수 내 : 당신은 슬라이더의 변경 이벤트를 사용할 수있는 디버깅을위한

 if (sliderValue < previousValue){ 
      var t, l; 
      t = $('#img').position().top; 
      l = $('#img').position().left; 
      if(t < 0) 
       t = t + (previousValue - sliderValue); 
      if(l<0) 
       l = l +(previousValue - sliderValue); 
      $('#img').offset({top: t, left: l}); 
     } 

. 이미지 크기를 조정할 때 x 및 y 값이 업데이트되지 않기 때문입니다.

나는 이것이 당신에게 영감을 줄 수 있기를 희망합니다! ;)

Answer 2

어쩌면이 같은 또는 슬라이드 기능 "

$('#img').css('top','1px'); 
$('#img').css('left','1px');