Bootstrap Carousel 的高度跳躍

Question

我有一個react-bootstrap輪播。

它在滾動時會跳躍，因為圖像具有不同的大小，但是如果我給它們大小weight: 1309px和height: 730px - 我失去了響應能力，並且在每個設備上只有730px的height並且它不會調整大小以進行響應.

如何修復它以使每張圖片的大小相同（不允許輪播跳躍）並保持響應能力？

看看圖片，以及箭頭如何在不同的高度跳躍：

![Bootstrap Carousel 截圖][1]

這是我的代碼：

 <div id="carousel-container"> <Carousel> <Carousel.Item> <img src={firstImg} /> <Carousel.Caption> <h3>Niagara Falls</h3> <p>One of the most famous wonders of nature is Niagara Falls.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img src={secondImg} /> <Carousel.Caption> <h3>Monuments Valley</h3> <p>Monument Valley is a region of the Colorado Plateau characterized by a cluster of vast sandstone buttes.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img src={thirdImg} /> <Carousel.Caption> <h3>Grand Canyon</h3> <p>The Grand Canyon is a famous canyon in Arizona.</p> </Carousel.Caption> </Carousel.Item> </Carousel> </div>

Answer 1

嘗試在你的 img 中使用className="d-block w-100"