如何在`react-image-gallery`中缩小图像尺寸？

Question

我正在使用React图片库在网页上创建一个图库。我从Firestore检索URL，然后将它们提供给ImageGallery组件，就像这样:

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

这是我用于图片的 CSS：

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

然而，无论我尝试什么方法，该图像总是显示得太大（我必须滚动才能看到整个图像）。如何缩小图像的大小，使其符合我的所需CSS？为什么会发生这种情况？

- Dylan Powers

Answer 1

您可以重写CSS以更改所有图像的高度和宽度。例如，如果您执行以下操作：

.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;
}

- Samim Hakimi

Answer 2

你也可以使用additionalClass属性代替originalClass。

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

您的.image样式将被应用。

originalClass是用于items数组中的，所以使用起来并不那么容易。

- Zanshin