javascript - 我如何调整此 javascript 以使其工作并响应？

Question

我想将 100% 作为图像的宽度，而不是特定的像素数，但它没有特定的尺寸就中断了。

这是一种调整 JavaScript 的方式吗？

Javascript

$(document).ready(function(){
    var $after = $('.after'),
        img_width = $('.after img').width(),
        init_split = Math.round(img_width/2);

      $after.width(init_split);  

        $('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $after.offset().left);
            $after.width(offX);
        });

        $('.before_after_slider').mouseleave(function(e){
        $after.stop().animate({
        width: init_split
        },1000)
        });
});

HTML

<div class="before_after_slider">
  <div class="before">
    <img src="center_before.jpg" width="auto" height="600px" alt="before" />
  </div>
  <div class="after">
    <img src="center_after.jpg" width="100%" height="600px"  alt="after" />
  </div>
</div>

Answer 1

您是否考虑过使用 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;
}