如何修改Lightbox2灯箱的默认图片尺寸为全屏？

Hey Daniel! Let’s get those Lightbox2 images looking nice and fullscreen instead of the tiny default size. You’ll need to tweak a couple of CSS rules, and optionally adjust the JavaScript settings if needed. Here’s how:

1. Adjust the Outer Container CSS #

The default .lb-outerContainer has fixed width/height values that constrain your images. Override them to let the container adapt to your image and screen size:

.lb-outerContainer {
  position: relative;
  width: auto; /* Replace fixed 250px */
  height: auto; /* Replace fixed 250px */
  max-width: 95vw; /* Optional: Leave a small margin from screen edges */
  max-height: 95vh;
  margin: 0 auto;
  border-radius: 4px;
  background-color: #fff;
}

2. Optimize the Image CSS #

Make sure the image itself scales properly within the container while maintaining its aspect ratio:

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: 100%; /* Replace original max-width: inherit */
  max-height: 90vh; /* Keep image within viewport height */
  border: 4px solid #fff;
}

3. Optional: Tweak JavaScript Settings (If Needed) #

If the CSS changes alone don’t give you the fullscreen behavior you want, you can adjust Lightbox2’s initialization options to set maximum dimensions tied to the viewport:

lightbox.option({
  'maxWidth': '95vw',
  'maxHeight': '95vh'
});

These changes work because we’re removing the fixed container constraints and letting both the container and image scale to fit the available screen space, while still keeping a small buffer to avoid images touching the edges of the viewport.

内容的提问来源于stack exchange，提问作者Daniel