zurb / twentytwenty

jQuery Plugin to Compare Images
ISC License
1.27k stars 295 forks source link

How to get a larger comparison box? #95

Open Danman800 opened 6 years ago

Danman800 commented 6 years ago

Hello,

I am pretty new to this and I want to use this script for comparison of pictures. I want the original size but the script is only showing the pictures in a small box. How do I get the original picture size?

Thanks!

Danman800 commented 6 years ago

I managed to get the box the size of the screen/browser but the part of the picture larger than the screen is cut off. How can I fix this?

Ezra-Siton-UIX commented 6 years ago

The plugin doesn't change image-Size (Only position) Use regular css for this.

One idea:

.reponsive-img{
   width: 100%;
   height: auto;
}

https://www.w3schools.com/howto/howto_css_image_responsive.asp

https://www.w3schools.com/cssref/pr_dim_width.asp https://www.w3schools.com/tags/att_img_width.asp

chris-aeviator commented 5 years ago

It would be very useful to set an image size in the plugin's config!!!

EDIT:

I looked into the src & it seems like twentytwenty is supposed to take the img width, but it's somehow not for me:

container 2019-03-14-155225_622x487_scrot

where the actual image size is 569 x 376

EDIT 2:

when resizing the image container via css, the clip-path value is not updated correctly