Javascript 如何将img维度从html移动到css并保持滑块工作？

我有一个before/after滑块（第一个内联图像），我想将图像维度属性移动到css中，但当我这样做时，它会中断。你知道怎么解决吗

我在这儿拉小提琴

HTML

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
        },200)
        });
});

---

将类添加到img属性中

这行javascript

img_width = $('.after img').width()

。。。正在获取

img

元素的宽度，但是没有一个css正在设置

img

元素的宽度，只有

img

元素包装

div

元素。因此，您需要显式设置宽度，如下所示

.before img,
.after img {
   width: 1000px;
   height: 600px;
}

.before img,
.after img {
   width: 100%;
   height: 100%;
}

。。。或者（类似于Sai Ram Sudheer的答案，但没有添加额外的类），就像这样

.before img,
.after img {
   width: 1000px;
   height: 600px;
}

.before img,
.after img {
   width: 100%;
   height: 100%;
}

。。。它利用包装器div维度来调整图像的大小。关键是您必须实际为

img

本身指定一个大小，而不仅仅是

img

的包装器，

$（'.after img'）.width（）

函数调用才能工作。然后您应该能够消除html中的设置。

哪个版本“坏了”？我没有测试（一切都是理论上的；我无法测试，因为你的小提琴没有为我显示任何图像）。如果容器本身没有设置必要的宽度/高度，则

100%

设置将中断。除此之外，它不应该中断，因为jquery中的

.width（）

应该读取css设置的值。

.before img,
.after img {
   width: 100%;
   height: 100%;
}