如何缩小“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？为什么会这样？

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