Lightbox - Is it possible to force resize the image?

Question

Does anybody know how to force resize the image that opens in lightbox either in CSS or by hacking lightbox?

I know it's not a good solution to having a fixed image size (should be done on upload) but it is a specific requirement of a client.

Thanks.

Solution 1

It's not a bad solution having fixed size. Just set max-height or max-width (in CSS) to whatever (but not both)- The image will then scale correctly.

But all images must be same format, otherwise height / width may vary.

And if you set fixed size in CSS (width, height), then the images will be scewed.

Solution 2

Add this to css:

#lightbox-container-image img { width:auto; max-height:520px; }

Solution 3

<style>
    .lb-outerContainer { max-width:690px; max-height:520px; }
    .lb-image{ width:500px!important; max-height:500px!important;}
</style>

Solution 4

In your CSS you can have the image size adjust to fill the maximum width while still maintaining the same aspect ratio like this:

img {width:100%; height:auto}

As long as the container is a block this should adjust the image size. Be aware it may look pixilated in older browsers because the image scaler used in those browsers relies on "nearest neighbor" sampling to scale the images.

View more solutions