缩放的可拖动图像超出 DIV 元素（jQuery）的范围

Question

我在 div 元素中有可拖动的图像对象（图像不能拖到 div 之外）。我还为该可拖动图像制作了一个缩放滑块，但问题是我正在缩放它超出 div 边界的图像（当图像在 div 边界附近被拖动和缩放时）。要修复它，我必须将它拖到任何地方才能再次卡在它的 div 中。缩放时有没有办法将图像保留在与缩放图像重叠的 div 元素内（最大图像缩放不大于 div 元素）。希望你能理解我的问题。这是我的代码：

$(function() {
      $( ".over_image" ).draggable({ cursor: "move", cursorAt: { top: 30, left: 80 } });
      $( ".over_image" ).draggable({ containment: "parent", scroll: false });
}); 
   $("#slider").slider({
                    step: 2,
                    min: 75,
                    max: 220,
                    value: 150,
                    slide: function(e,ui){
                        var sliderValue =  jQuery("#slider").slider("value");
                        $(".over_image").width(sliderValue);

                    }
                });



<div class="wraper">
     <div id="output" class="foto-frame">
 <img class="over_image" id="img_1" src="1.png" width="100" height="auto" />
     </div>
<div id="progressbox"><div id="progressbar"></div ></div>
<div class="nav-buttons">
     <div id="slider"></div>
</div>

图片出不去#outputdiv

Answer 1

您是否尝试过将此属性添加到 div 类中：

.foto-frame {
        overflow:hidden;
}