How to deal with various sized images?

[Vinifrj]

What to do when your gallery is composed of images varying wildly in size? i keep having the controls going all over the place due to this, I tried setting the originalWidth and Height props but if I do so it breaks on mobile, using a tag style={objectFit: 'fill'} helps but it's not perfect, is this just a limitation of the library when your images vary a lot in size?

This is my current implementation

      <ImageGallery
            items={assetsEditing.map(asset => ({
              original: asset.url,
              thumbnail: asset.url,
              originalWidth: 1000,
              sizes: '(max-height: 900px) 300px, 1000px;',
            }))}
            showThumbnails={false}
            showPlayButton={false}
            showFullscreenButton={false}
            showBullets
            style={{
              objectFit: 'fill',
            }}
          />

[HenrikeStahlhut]

For the thumbnails, this worked for me:

.image-gallery-thumbnail img {
  object-position: center;
  object-fit: cover;
  height: 80px;
}

and for the bigger images this:

.image-gallery-content:not(.fullscreen)
  .image-gallery-slide
  .image-gallery-image {
  height: 450px;
}

A little late but hope this helps :)