如何让这个图像不离开父母div

Question

我得到了这段代码我无法弄清楚如何不超过父母div边界。

对象的可拖动和我用滑块调整它，但我不能如何做到这一点，谢谢。

$(document).on("input change",'.image-slider', function() { 

    $('#timelineBGload-perfil').draggable(); 

    var slider = parseInt($(this).val()); 

    var height1 = $('#timelineBGload-perfil').height(); 
    var width1 = $('#timelineBGload-perfil').width(); 

    var percent1 = width1/600 * 100; 

     var jeje = slider - 191; 
     var jeje2 = slider - 191; 

     $('#timelineBGload-perfil').css({'width': slider,'height':'auto'}); 

     $('#timelineBGload-perfil').css({'left': '-'+ jeje +'px','top': '-'+ jeje2 +'px'}); 

    }); 

https://jsfiddle.net/fypqgym1/

Answer 1

您必须在移动它之前，考虑到图像的位置。我加入这个关键部分，你的逻辑：

var previousLeft = $('#timelineBGload-perfil').css('left'); 
var previousTop = $('#timelineBGload-perfil').css('top'); 

下面是一些优化工作的例子： https://jsfiddle.net/fypqgym1/11/

您需要用图像和尺寸的工作，使其无论你需要的。您也可以添加一个初始化步骤，让您按照启动时所需的方式进行对齐。