Как я могу уменьшить размер изображения в 'response-image-gallery`?

Question

Я использую библиотеку React изображений для создания галереи изображений на веб-странице. Я получаю URL-адреса из Firestore, а затем подаю их в компонент 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;
}