1

I use React bootstrap Carousel on my website. When I resize the browser, the carousel doesn't resize proportionally. The width of Carousel adjusts correctly but the height doesn't. It creates a gap underneath the image as you can see from the arrows don't align in the middle of the image.

I use first example from the React Bootstrap page. Exact same HTML with only change the picture in Carousel. I already try put this HTML on XAMPP and it works fine but on REACT it doesn't.

How can I adjust the Carousel to resize proportionally?

Link to React Bootstrap example I've used. https://react-bootstrap.netlify.app/components/carousel/#carousels

The HTML and image is below.

<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>

enter image description here

TrinVeerasiri
  • 31
  • 1
  • 1
    Are you able to provide the exact images? Perhaps the issue is caused by a custom stylesheet. Please read https://stackoverflow.com/help/minimal-reproducible-example. It currently [looks fine](https://codesandbox.io/s/determined-northcutt-fvt4r?file=/src/App.js:153-185) even if I use different dimensions for each image. – 95faf8e76605e973 Aug 30 '20 at 01:45
  • Hi, Thank you for you replied. I just debug and found that I have set Carousel CSS before. The setting fix the Carousel height to 550px. That's why the resize page create white space under the picture. – TrinVeerasiri Aug 31 '20 at 07:22

0 Answers0