如何调整此javascript以使其正常工作并具有响应能力？

我想用100%作为图像的宽度，而不是一个特定的px数，但它没有特定的尺寸

这是一种调整JavaScript的方法，这样我就可以响应地工作了吗

Javascript

HTML

---

您是否考虑过使用css来实现这一点

.before { 
  background: url(center_before.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

我能够使这个脚本响应如下

$(document).ready(function() {
  var $parent = $('.before_after_slider');
  var $after = $('.before_after_slider .after');
  var $image = $('.before_after_slider .after img');

  var img_width = $('.before_after_slider .after img').width();
  var img_height = $('.before_after_slider .after img').height();

  var init_split = Math.round(img_width/2);

  // Calculate responsive width correctly (after image is loaded).
  $('.before_after_slider .after img').load(function(){
    var img_height = $(this).height();
    img_width = $(this).width();
    img_height = $(this).height();
    init_split = Math.round(img_width/2);
  });

  // Set the height of the parent to prevent collapse.
  $parent.height(img_height);

  // Set the image height and width to 100% (now fixed).
  $image.height(img_height);
  $image.width(img_width);

  // Set the container height to 100% but the width to 50%.
  $after.height(img_height);
  $after.width(init_split);

  // Adjust container width based on mouse movement.
  $('.before_after_slider').mousemove(function(e) {
    var offX  = (e.offsetX || e.clientX - $after.offset().left);
    $after.width(offX);
  });

  // Reset container to 50% when mouse leaves area.
  $('.before_after_slider').mouseleave(function(e) {
    $after.stop().animate({
      width: init_split
    },1000)
  });

});

---

别以为这样就行了。我正在尝试使此滑块响应设置宽度：100%和高度：auto@Murali这打破了滑块。

.before { 
  background: url(center_before.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

$(document).ready(function() {
  var $parent = $('.before_after_slider');
  var $after = $('.before_after_slider .after');
  var $image = $('.before_after_slider .after img');

  var img_width = $('.before_after_slider .after img').width();
  var img_height = $('.before_after_slider .after img').height();

  var init_split = Math.round(img_width/2);

  // Calculate responsive width correctly (after image is loaded).
  $('.before_after_slider .after img').load(function(){
    var img_height = $(this).height();
    img_width = $(this).width();
    img_height = $(this).height();
    init_split = Math.round(img_width/2);
  });

  // Set the height of the parent to prevent collapse.
  $parent.height(img_height);

  // Set the image height and width to 100% (now fixed).
  $image.height(img_height);
  $image.width(img_width);

  // Set the container height to 100% but the width to 50%.
  $after.height(img_height);
  $after.width(init_split);

  // Adjust container width based on mouse movement.
  $('.before_after_slider').mousemove(function(e) {
    var offX  = (e.offsetX || e.clientX - $after.offset().left);
    $after.width(offX);
  });

  // Reset container to 50% when mouse leaves area.
  $('.before_after_slider').mouseleave(function(e) {
    $after.stop().animate({
      width: init_split
    },1000)
  });

});