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.

Answer 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.

Answer 2

Rather than using css, just resize the image using jquery's width() and height() methods on the image element.

Before you do that I'd recommend dividing one by the other to get the ratio, so you don't distort the image! :)

Answer 3

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'll probably just look back because the image scaler in most browsers use "nearest neighbor" sampling scale the images