反应：基于图像的轮播/幻灯片响应高度

Question

当图像不像其他图像一样大时，我想摆脱空白。我不确定该如何摆脱空白。轮播文档并没有真正帮助。我是否需要将naturalSlideHeight设置为其他值？但是idk如何事先获取图像尺寸的值。

 <div className="p-2 mt-3">
            {this.state.data.gallery === undefined ? (
              <div />
            ) : this.state.data.gallery.length == 0 ? (
              <CarouselProvider
                naturalSlideWidth={100}
                naturalSlideHeight={100}
                totalSlides={1}
                className="carousel slide pointer-event"
              >
                <Slider className="carousel-inner">
                  <Slide index={0}>
                    <img
                      className="d-block w-100"
                      src={
                        this.state.data["product_img"] === ""
                          ? "/assets/images/slide.png"
                          : this.state.data["product_img"]
                      }
                      alt=""
                    />
                  </Slide>
                </Slider>
                <div className="w-100 text-center p-1">
                  <Dot slide={0} className="nav-dot">
                    <i class="fas fa-dot-circle"></i>
                  </Dot>
                </div>
              </CarouselProvider>
            ) : (
                  <CarouselProvider
                    naturalSlideWidth={100}
                    naturalSlideHeight={100}
                    totalSlides={this.state.data.gallery.length}
                    className="carousel slide pointer-event"
                  >
                    <Slider className="carousel-inner">
                      {this.state.data.gallery.map((rowGall, keyGall) => (
                        <Slide index={keyGall}>
                          <img
                            className="d-block w-100"
                            src={
                              rowGall.gallery === ""
                                ? "/assets/images/slide.png"
                                : rowGall.gallery
                            }
                            alt=""
                          />
                        </Slide>
                      ))}
                    </Slider>
                    <div className="w-100 text-center p-1">
                      {this.state.data.gallery.map((row, keyGall) => (
                        <>
                          <Dot slide={keyGall} className="nav-dot">
                            <i class="fas fa-dot-circle"></i>
                          </Dot>
                        </>
                      ))}
                    </div>
                  </CarouselProvider>
                )}
          </div>

I want to get rid of this white space. makes everything go up