jquery - 如何让这张图片不脱离 parent 的div

Question

我得到了这段代码，我不知道如何不超过 parent 的 div 边框。

该对象是可拖动的，我用 slider 调整它的大小，但我不知道该怎么做，谢谢。

 $(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/

您需要使用图像和尺寸来制作您需要的图像。您还可以添加一个初始化步骤，在启动时按照您想要的方式对齐事物。