如何调整React Bootstrap的轮播以按比例调整大小？

如何解决如何调整React Bootstrap的轮播以按比例调整大小？

我在我的网站上使用React bootstrap Carousel。调整浏览器大小时，轮播不会按比例调整大小。轮播的宽度可以正确调整，但高度不能调整。如您从箭头中看到的那样，它在图像下方创建了一个间隙，该间隙未对准图像的中间。

我使用React Bootstrap页面的第一个示例。完全相同的HTML，仅更改Carousel中的图片。我已经尝试过将此HTML放在XAMPP上，并且可以正常工作，但在REACT上却不能。

如何调整轮播以按比例调整大小？

链接到我使用过的React Bootstrap示例。 https://react-bootstrap.netlify.app/components/carousel/#carousels

HTML和图像在下面。

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={require('../../img/Testing/slab00.jpg')}
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={require('../../img/Testing/slab01.jpg')}
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={require('../../img/Testing/slab00.jpg')}
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>