title: How do I shrink the size of an image in `react-image-gallery`?
body: <p>I am using the <a href="https://github.com/xiaolin/react-image-gallery/blob/master/src/ImageGallery.jsx" rel="nofollow noreferrer">React image gallery library</a> to create an image gallery on a web page. I am retrieving the URLs from Firestore and then feeding them into the <code>ImageGallery</code> component like so: </p>
  
  <pre><code>&lt;ImageGallery items={this.state.images} originalClass={styles.image} /&gt;
  </code></pre>
  
  <p>And this is the CSS I'm using for the image:</p>
  
  <pre><code>.image {
    width: 30vw;
    height: 30vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    margin: auto;
  }
  </code></pre>
  
  <p>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?</p>