图像滑块比较不正确缩放？

Question

我在Hubspot上创建了一个自定义模块，其代码如下：

    // Call & init
    $(document).ready(function(){
      $('.ba-slider').each(function(){
        var cur = $(this);
        // Adjust the slider
        var width = cur.width()+'px';
        cur.find('.resize img').css('width', width);
        // Bind dragging events
        drags(cur.find('.handle'), cur.find('.resize'), cur);
      });
    });

    // Update sliders on resize. 
    // Because we all do this: i.imgur.com/YkbaV.gif
    $(window).resize(function(){
      $('.ba-slider').each(function(){
        var cur = $(this);
        var width = cur.width()+'px';
        cur.find('.resize img').css('width', width);
      });
    });

    function drags(dragElement, resizeElement, container) {
	
      // Initialize the dragging event on mousedown.
      dragElement.on('mousedown touchstart', function(e) {
    
        dragElement.addClass('draggable');
        resizeElement.addClass('resizable');
    
        // Check if it's a mouse or touch event and pass along the correct value
         var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
    
        // Get the initial position
        var dragWidth = dragElement.outerWidth(),
            posX = dragElement.offset().left + dragWidth - startX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth();
 
        // Set limits
        minLeft = containerOffset + 10;
        maxLeft = containerOffset + containerWidth - dragWidth - 10;
    
        // Calculate the dragging distance on mousemove.
        dragElement.parents().on("mousemove touchmove", function(e) {
    	
          // Check if it's a mouse or touch event and pass along the correct value
          var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
      
          leftValue = moveX + posX - dragWidth;
      
          // Prevent going off limits
          if ( leftValue < minLeft) {
            leftValue = minLeft;
          } else if (leftValue > maxLeft) {
            leftValue = maxLeft;
          }
      
          // Translate the handle's left value to masked divs width.
          widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
			
          // Set the new values for the slider and the handle. 
          // Bind mouseup events to stop dragging.
          $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {
            $(this).removeClass('draggable');
            resizeElement.removeClass('resizable');
          });
          $('.resizable').css('width', widthValue);
        }).on('mouseup touchend touchcancel', function(){
          dragElement.removeClass('draggable');
          resizeElement.removeClass('resizable');
        });
        e.preventDefault();
      }).on('mouseup touchend touchcancel', function(e){
        dragElement.removeClass('draggable');
        resizeElement.removeClass('resizable');
      });
    }

    .ba-container {
      width: 400px;
    }

    .ba-slider {
      position: relative;
      overflow: hidden;
    }

    .ba-slider img {
      width: 100%;
      display: block;
    }

    .resize {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      overflow: hidden;
    }

    .handle {
      /* Thin line seperator */
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      margin-left: -2px;
      background: rgba(0, 0, 0, .5);
      cursor: ew-resize;
    }

    .handle:after {
      /* Big green knob  */
      position: absolute;
      top: 50%;
      width: 64px;
      height: 64px;
      margin: -32px 0 0 -32px;
      content: '\21ff';
      color: #008000;
      /* a dark green */
      font-size: 48px;
      text-align: center;
      line-height: 64px;
      background: #99ff99;
      /* @darker green of gradient */
      border: 1px solid #008000;
      /* a green */
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 60px 50px -30px #e6ffe6;
      /* lighter green in gradient */
    }

    .draggable:after {
      width: 48px;
      height: 48px;
      margin: -24px 0 0 -24px;
      line-height: 48px;
      font-size: 30px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ba-container">
       <div class="ba-slider">
           {% if module.image_field.src %}
	         <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
           {% endif %}      
        <div class="resize">
           {% if module.image_field_1.src %}
	          <img src="{{ module.image_field_1.src }}" alt="{{ module.image_field_1.alt }}" width="{{ module.image_field_1.width }}" height="{{ module.image_field_1.height }}">
           {% endif %}
        </div>
         <span class="handle"></span>
       </div>
    </div>

但是当我在页面上使用此模块时，会得到以下结果：

我尝试使用普通的CSS滑块，这种滑块看起来很难看，而且效果很好，但是当我尝试使用这种滑块时，它会缩放图像，而不仅仅是保持相同的大小。所以我感觉JS有问题吗？