Comparison sliders don't fit images responsively

[paambaati]

Images under comparison sliders (especially when the "after" image is smaller than the "before") are not fit responsively — meaning the full image isn't displayed entirely; I assume it is because of the object-fit: none style. unsetting it shows the whole image, but the sliding motion stretches the image as we slide.

@picturepan2 Is there a more elegant solution?

[picturepan2]

@paambaati If you want to compare two images like that, you will need to have same sized images. Otherwise you can not compare them.

[paambaati]

@picturepan2 Figured as much, thanks.

Do you plan to support responsive images inside comparison sliders?

[picturepan2]

@paambaati The update v0.4.6 with this fix is released.

[paambaati]

@picturepan2 Thanks, but now with the object-fit: cover fix, the 'after' image moves with the slider, and is not perfectly superimposed over the 'original' image.

For example, see https://i.imgur.com/BJSGzps.gifv

[picturepan2]

@paambaati What is your browser and version?

[paambaati]

@picturepan2 Chrome 64.0.3269.3 on macOS. Can confirm that this happens in Firefox 57 as well.

[picturepan2]

@paambaati Does this example work for you?

[paambaati]

@picturepan2 That example works! But I'm trying to use this particular image - https://httgp.com/content/images/2017/11/me.jpg, and it doesn't work. I've tried this image on your website too (by just modifying the page source inline), and I get the same weird dragging effect.

Does this have to do with the aspect ratio of the image?

EDIT: Can confirm, it was the aspect ratio. The example uses an aspect ration of 1.77, while my image has an aspect ratio of 1.3! I made a 1.77 ratio crop, and I no longer see the issue! Is this expected, or would you suggest a better alternative?

[picturepan2]

@paambaati I don't have any issue even when I use other aspect ratio images. Can you show me your code?

[paambaati]

@picturepan2 I'm privately beta testing it. Can I DM you?

[picturepan2]

@paambaati Yes, Email is fine. picturepan2@hotmail.com.