I am currently working with a react-bootstrap carousel component.
The issue I am facing is that the carousel jumps when it scrolls due to the images having different sizes. If I try to fix this by setting the size with weight: 1309px and height: 730px, the responsiveness is lost as the height remains fixed at 730px on all devices, not adapting to different screen sizes.
How can I ensure that all images have the same size (preventing the carousel from jumping) while still maintaining responsiveness across different devices?
Take a look at the images and notice how the arrows jump to different heights:
![Bootstrap Carousel Screenshot][1]
Below is the code I am currently using:
<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>