How to fit the image into the carousel so the carousel doesn't change size with the image?

I was wondering how can I keep consistent images ratio in the carousel so it doesn’t change size with the image but also bearing in mind that it needs to be responsive when the viewport shrinks it needs to shrink as well. I have tried setting the carousel item to 100% and it doesn’t work, same with the image sizing, it doesn’t work either. the images still changes the height of the carousel when it renders.

import React, { useState } from 'react'
import Carousel from 'react-bootstrap/Carousel'
import './HomePageCarousel.css'

export default function HomePageCarousel (props) {
  const { ShopHomepage } = props
  const [index, setIndex] = useState(0)

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex)
  }
  const style = {
    maxWidth: 555,
    maxHeight: 229,
    margin: 0,
    width: 555,
    height: 229,
    objectFit: 'contain'

  }
  return (
    <Carousel activeIndex={index} style={{ width: '100%', Height: '100%' }} onSelect={handleSelect} touch pause={false} controls={false} fade indicators={false} keyboard interval={3000} wrap={false}>
      {ShopHomepage.map((item, i) => {
        return (
          <Carousel.Item className='carousel-item' item={item} key={i}>

            <img
              className='d-block w-100'
              src={item.image}
              alt={item.title}
              style={{ style }}

            />

            <Carousel.Caption>
              <h3>{item.title}</h3>
              <p>{item.subtitle}</p>
            </Carousel.Caption>
          </Carousel.Item>
        )
      }

      )}
    </Carousel>

  )
}
const HomePageHero = () => {
  return (
    <>
      <div className='bigCon'>

        <img src={cover} style={{ width: '100%', height: '100%' }} alt='Card image' />

      </div>

      <div className='splitCon'>
        <div className='con2'>

          <HomePageCarousel ShopHomepage={ShopHomepage} />

        </div>
        <div className='con3'>
          <HomePageCarousel ShopHomepage={ActivityHomepage} />
        </div>
      </div>
      {/* <div className='con1'>

      {/* </div> */}

    </>
  )
}; export default HomePageHero