How do I shrink the size of an image in `react-image-gallery`?

Question

I am using the React image gallery library to create an image gallery on a web page. I am retrieving the URLs from Firestore and then feeding them into the ImageGallery component like so:

<ImageGallery items={this.state.images} originalClass={styles.image} />

And this is the CSS I'm using for the image:

.image {
  width: 30vw;
  height: 30vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  margin: auto;
}

However, the image always appears way too large (I have to scroll to see the whole thing), no matter what I try. How do I shrink the size of the image so that it corresponds to my desired CSS? Why is this happening?

Answer 1

You can override the css to change the height and width of all your images. For example if you do something like:

.image-gallery {
    width: 40%;
    height: auto;
}

.image-gallery-slide img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
}

.fullscreen .image-gallery-slide img {
    max-height: 100vh;
}

Answer 2

You can also use the additionalClass prop instead of originalClass .

<ImageGallery items={this.state.images} additionalClass={styles.image} />

Your .image styles will be applied.

originalClass is meant to be used inside of the items array, so it is not as easy to use.