How to make full-size images in lightbox

Design help Custom code
1

hello! can someone advise me how I can make full-size images in lightbox, without top and bottom margins (and without left and right if it is a horizontal img)when I click on it?

I removed the small previews in the lightbox and I would like to make images full screen

i have seen this topic but the custom code didn’t work for me:(
Full screen Lightbox image height solution Modal colour transparency - Tips and Tricks - Blocs Forum

Here is my site Read-Only: https://preview.webflow.com/preview/hism?utm_medium=preview_link&utm_source=designer&utm_content=hism&preview=8eba0efcbdc03d347ca5385aa039cec2&workflow=preview

2

I’d not really recommend to make it cover the whole screen because this way you’ll not get to see the whole picture. And definitely not with the horizontal image.

Anyway, regarding the code here is what you can use.

<style>
.w-lightbox-strip {
    display: none;
}

.w-lightbox-content {
    margin: 0;
    height: 100%;
}

#w-lightbox-view, 
.w-lightbox-frame,
.w-lightbox-figure {
    height: 100%;
    width: 100%;
}

.w-lightbox-img.w-lightbox-image {
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
</style>
3

By the way, the link you shared is from Blocsapp so that may not be relevant here with Webflow.

4

wow! thank you!
This is almost what I was looking for, but now the photos are stretched very much. Can you please tell me where in the code I need to specify so that the photos are adjusted to the width and height of the screen? so that the photo fits completely on the screen but without margins at the top and bottom, and on the right and left in proportion to the image?

can I change the background color of it to white without opacity?

5

Ok then update the above code to object-fit: contain; and see if that is what you are looking for.

Do you mean that semi-transparent black background on the back? If so then try applying color to this class .w-lightbox-backdrop

6

WOW! it works perfectly!!
Thank you soo much!!

1 Like
7

Great, and always happy to help. :+1:

As you’ve got your solution, please mark this post and solved.

1 Like