Control size of lightbox image?

[madbaker]

Hi. The lightbox image is trying to fill my entire window, no matter the size of the image.

My code:

<div className="image" style={{ width: "100px", display: "block", margin: "auto" }} > <ModalImage small={displayImg} medium={displayImg} alt={description + " #" + number} /> </div>

In my test case, the image in displayImg is a jpg of 500px x 276px . I display the small image at 100px wide (styled within the div) and want the image in the lightbox to be the full 500x276.

The small image displays fine, but the lightbox image blows up to the full size of the window.

Is there any way to control the image size in the lightbox?

[amrancz]

Hi, I'm running into the same issue and haven't found a solution yet. In the demo, this doesn't seem to be an issue, but there I'm not seeing anything in the code that would control the size of the image in the lightbox.

[RokvicSasa]

Hi. The lightbox image is trying to fill my entire window, no matter the size of the image.

My code:

<div className="image" style={{ width: "100px", display: "block", margin: "auto" }} > <ModalImage small={displayImg} medium={displayImg} alt={description + " #" + number} /> </div>

In my test case, the image in displayImg is a jpg of 500px x 276px . I display the small image at 100px wide (styled within the div) and want the image in the lightbox to be the full 500x276.

The small image displays fine, but the lightbox image blows up to the full size of the window.

Is there any way to control the image size in the lightbox?

you can control max-width of image in css:

.__react_modal_image__modal_content {
  img {
    max-width: 900px;
  }
}