Images become stretched and have white gaps

[EngineNeo]

Expected behaviour

When using the rowHeight property, the images will increase in size and continue to fill the gallery.

Actual behaviour

When rowHeight is used, the images become stretched and new whitespace are created in the images.

Steps to reproduce behaviour

Adding rowHeight to my images

Code:

const IMAGES =
[      {
  "src": "images/studies/Stilllife.jpg",
  "thumbnail": "/images/studies/studyThumbnails/stilllifeThumbnail.jpg",
  "thumbnailWidth": 1920,
  "thumbnailHeight": 2967,
  "title": "Study - Still Life"
},
. . .
},
{
  "src": "images/studies/15feet.jpg",
  "thumbnail": "/images/studies/studyThumbnails/15feet.jpg",
  "thumbnailWidth": 5100,
  "thumbnailHeight": 3300,
  "title": "Study - 15 Feet"
}
]

. . .

<div style={{
                    display: "block",
                    minHeight: "1px",
                    border: "1px solid #ddd",
                    overflow: "auto"}}>
      <Gallery
        images={IMAGES}
        margin={20}
        rowHeight={300}
        enableLightbox={false}
        enableImageSelection={false}
      />
    </div>

Screenshot of normal behaviour without rowHeight:

Screenshot of actual behaviour with rowHeight set to 300:

[itoldya]

Hello @EngineNeo!

Could you provide a reproducible example, please? I've tried to reproduce this behavior with your settings, everything seems to work well https://codesandbox.io/embed/test-forked-dblhpz?fontsize=14&hidenavigation=1&theme=dark.

I've been noticing similar behavior when the site uses global image styles. For example

img {
  max-width: 100%;
}

If you have something like this, you may overwrite this style for images inside the gallery

#ReactGridGallery img {
  max-width: none !important;
}

[EngineNeo]

Hello @itoldya !
Yes you were correct about the img styles conflicting with the images, thank you. However, it did not fully fix the problem. While it removed the white gaps which were seen above. The full image still does not display as can be seen below (IMG 3). Is this the intended function of the component?

Here is what I did to edit the stylesheet for the component:

#ReactGridGallery img {
  max-width: none !important;
  height: none !important;
}

[itoldya]

This is expected. This library uses fixed row height, so it evenly crops the edges of each picture in a row to completely fill it.

If you don't want images to be cropped I recommend you to look at this amazing photo gallery by @igordanchenko.