jQuery image resize out-width不'；不合适

我正在尝试做一个横幅，你可以调整大小和拖动图像。除了调整尺寸外，一切正常

使用图像下方的滑块调整图像大小时。图像将增长。调整图像大小后，您可以成功地将其拖动到右侧和底部。当您向右拖动图像时，您决定再次缩小图像。可以使用图像下的滑块。但现在问题来了。如果您位于图像的右侧，并且希望再次调整图像的大小，则图像将与div不匹配。您将看到黑色背景

以下是一个例子：

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("#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')});

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

#box{
    background:black;
}


#img{
}

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

我希望有人能帮助我

您好，

---

Dennis。

在幻灯片功能中，可以尝试类似这样或沿着这些路线进行操作。”

---

我在你的小提琴中添加了一些代码，我认为它现在似乎正在工作…
小提琴：

滑块初始化之前：

 var previousValue = 0;

在幻灯片事件的事件处理程序函数中：

<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("#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')});

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

#box{
    background:black;
}


#img{
}

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

if（sliderValue如果（我想知道答案。我已经试过了。但是当你用滑块缩小时，它会自动变为顶部1px和左侧1px。这不是我想要的。我希望一个人可以重新调整大小回到原来的位置。非常感谢。这正是我需要的。是的，这启发了我！）谢谢！！由于某些原因，你的很棒的东西只能在JSFIDLE中使用。它在JS BIN中或仅在我的网站上不起作用。你知道其他的吗？