Full image size on lightbox

Hello everyone,

Can anyone please help me with the code to fix the size of my images.

I have set the aspect ratio to 1:1 to make the thumbnails square on preview but upon pop-out, I want to see the full size of my images (landscape, panorama) instead of square. 

My site: (deleted)

Thank you and stay safe,

Add to Home > Design > Custom CSS

.gallery-lightbox-item img {
    object-fit: cover !important;
}

2 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.gallery-lightbox-item img {
    object-fit: cover !important;
}

 

@tuanphan Thanks for reaching out! I've added the code on my custom css but no change was made. Can you please check on this?

Thank you in advance,
p

@tuanphan Sorry for chasing you. Please help me with code 🙏😣

Do you still need help on this?

On 8/17/2020 at 5:15 AM, Ptphotography said:

@tuanphan Thanks for reaching out! I've added the code on my custom css but no change was made. Can you please check on this?

Thank you in advance,
p

This one worked for me! I just replaced the word cover for contain for it to fit my screen no matter the size. Thank you!!! 

Hi there

@tuanphanThis is exactly I have been looking for a while and I stumbled upon this post. The code given here works beautifully for landscape images but it sort of distorts my portrait images. Is there a way to enlarge only landscape images in light box?

Your assistance will be greatly appreciated.

MoCha

On 12/26/2021 at 8:06 AM, MoCha said:

Hi there

@tuanphanThis is exactly I have been looking for a while and I stumbled upon this post. The code given here works beautifully for landscape images but it sort of distorts my portrait images. Is there a way to enlarge only landscape images in light box?

Your assistance will be greatly appreciated.

MoCha

Can you share link to page where you have problem? We can check easier

(I guess no way to target landscape images only, but if you share url, we can take a look)

Dear @tuanphan 

I just used your code here to expand lightbox.  

But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? 

Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii

Password: Lemon

Sincerely.. Peter

The code I used

.gallery-lightbox-item img {
    object-fit: cover !important;
}

On 2/11/2022 at 3:57 PM, peterbjerg said:

Dear @tuanphan 

 

I just used your code here to expand lightbox.  

But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? 

 

Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii

Password: Lemon

Sincerely.. Peter

 

 

The code I used

.gallery-lightbox-item img {
    object-fit: cover !important;
}

Try use this CSS

.gallery-lightbox-item img {
    object-fit: contain !important;
}
.gallery-lightbox {
    padding: 0 !important;
}

Dear @tuanphan 

Follow-up: SqSp 7.1 FE… my gallery lightbox images are opening too large on desktop view.

I'd like to have control over the image size and limit the size to about 50% in desktop view, and keep the size as is on smartphones.

I've explored CSS such as this for the desktop, but it's not working:

/* Lightbox max size */
.gallery-lightbox-item img {
  width: 50% !important;
  height: auto !important;
}

Can you guide me in the right direction? Thanks!

On 6/15/2023 at 5:51 PM, TaitDesign said:

Dear @tuanphan 

Follow-up: SqSp 7.1 FE… my gallery lightbox images are opening too large on desktop view.

I'd like to have control over the image size and limit the size to about 50% in desktop view, and keep the size as is on smartphones.

I've explored CSS such as this for the desktop, but it's not working:

/* Lightbox max size */
.gallery-lightbox-item img {
  width: 50% !important;
  height: auto !important;
}

Can you guide me in the right direction? Thanks!

Can you share link to page? We can check it again easier

Hello Tuanphan. Thank you for responding. Member "Beyondspace" was able to help when I put the question out to others. It's working fine, however I'm looking to control other Lightbox attributes. I just posted that request on the Circle Forum (June 20, 8:25 am EDT USA)

https://www.taitdesign.com/identity-branding-design-systems