I'm using /. I have image thumbnails and on clicking them they open in lightbox - obviously.

The issue I have is that when some of those images are 1800x1200, lightbox covers the whole webpage.

How can I edit to ensure that the images are a maximum height of let's say 400px and width is in proportion? I can't simply upload the images in lower dimensions as they are user uploaded images, so I need to do this script/server side.

Thanks!

I'm using http://lokeshdhakar./projects/lightbox2/. I have image thumbnails and on clicking them they open in lightbox - obviously.

The issue I have is that when some of those images are 1800x1200, lightbox covers the whole webpage.

How can I edit to ensure that the images are a maximum height of let's say 400px and width is in proportion? I can't simply upload the images in lower dimensions as they are user uploaded images, so I need to do this script/server side.

Thanks!

• javascript
• css
• lightbox

Share Improve this question Follow asked Oct 30, 2012 at 2:42 DaveDave 68722 gold badges1111 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use the max-width and max-height CSS properties on both the images and the lightbox:

Demo: http://jsfiddle/rdfAV/1/

CSS:

img {
    max-width: 400px;
    max-height: 400px;
}

.lb-outerContainer, .lb-dataContainer {
    max-width: 420px;
    width: auto!important;
    height: auto!important;
}​

This method appears to be patible with all major browsers, a full patibility list is available here: http://caniuse./#feat=minmaxwh

Please try adding the following to your CSS:

 .lb-image{
      max-width: inherit;
  }

Thanks A Lot .. Really Help Full To My Landing Page

Some Editied Code , Play Wisely

img {
max-width: 800px;
max-height: 600px;
}

.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​