Bootstrap旋转木马在高度上跳跃

Question

我有一个react-bootstrap转盘。

它在滚动时会跳跃，因为图像的大小不同，但如果我给它们weight: 1309px和height: 730px的大小，我就会失去响应能力，每个设备上只有height的730px，它不会调整大小以响应。

我如何修复它，使每张图片的大小相同(不允许旋转木马跳跃(并保持响应能力？

看看图片，看看箭头是如何在不同的高度跳跃的：

[引导转盘屏幕截图][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"。和如果这不起作用，托盘使用另一个更高的图像！