Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

SOLVED: Product Image lightbox photo cropped


Arch
Go to solution Solved by bangank36,

Question

Site URL: http://www.arch-worldwide.com/shop-all

Hello,

I've set the images on my store to show a lightbox when clicked, but the portrait photos are always cropped when they show up in the lightbox, even when I input the zoom factor as 0 on the design settings. How can I make it so the whole image shows fit to screen instead

image.thumb.png.7b7ca40bd15bbd8141439f0861e95ede.png

Edited by Arch
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hope this help, Arch .gallery-lightbox-item img { top: 0 !Important; width: 100% !important; height: 100% !important; }  

@bangank36 This skews the image though and squeezes its dimensions onto the screen.  

This may removed the distortion .gallery-lightbox-item img { width: auto !important; height: 100% !important; margin: 0 auto; left: 50% !important; transform: translateX(-50%); }

Posted Images

4 answers to this question

Recommended Posts

  • 0
4 minutes ago, Arch said:

@bangank36 This skews the image though and squeezes its dimensions onto the screen.

 

This may removed the distortion

.gallery-lightbox-item img {
  width: auto !important;
  height: 100% !important;
  margin: 0 auto;
  left: 50% !important;
  transform: translateX(-50%);
}

image.thumb.png.682a5ab604a5e4eda47eb34144ca7581.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Hope this help, Arch

.gallery-lightbox-item img {
    top: 0 !Important;
    width: 100% !important;
    height: 100% !important;
}

 

image.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...