html - Carousel responsize size, all images same size

Question

I have an carousel. My idea is that every image should be the same size, but the size should still be responsive. So like the width should be 100% and the image 16:9, I hope u get what I mean.

So here is my code:

<Carousel>
          {slide.map(slideItem => (
            <Carousel.Item>
              <a href={"/news/" + slideItem.path}>
                <div style={{ width: '100%'}}>
                  <img
                    style={{ overflow: 'hidden'}}
                    className="w-100 rounded-corners"
                    src={slideItem.img_path}
                    alt={slideItem.img_des}
                  />
                </div>
              <Carousel.Caption>
                <div
                  className="slider-subtitle font-standard"
                >
                  {slideItem.subtitle}
                </div>
              </Carousel.Caption>
              </a>
            </Carousel.Item>
          ))}
        </Carousel>

What i have to add in the style tag at the div and at the image, that all images which are mapped to the carousel haves the same size?

(This Carousel is made with react, and is from react-bootstrap, dont know if that matters. )

question from:https://stackoverflow.com/questions/66063661/carousel-responsize-size-all-images-same-size

Answer 1

Waitting for answers