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>

图片无法离开#output div

Answer 1

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

.foto-frame {
        overflow:hidden;
}

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

1 个答案: