React Carousel with Bootstrap styling challange

Question

I'm trying to set a carousel height to 60vh. When I do so, elements from section below overflow the carousel, or images with functional buttons are cut off. My goal is to preserve both sections separate and and set the carousel to 60vh height with all the functionality buttons visible on it.

import React from 'react'
import styled from 'styled-components'
import { Carousel } from 'react-bootstrap'
import slide01 from "../images/Koala1.jpeg"
import slide02 from "../images/Koala2.jpeg"
import slide03 from "../images/Koala3.jpeg"

const Slider = () => {
  return (
<CarouselContainer>    
  <Carousel>
    <Carousel.Item>
      <img src={slide01} alt="First Slide" />
    </Carousel.Item>
    <Carousel.Item>
      <img src={slide02} alt="Second Slide" />
    </Carousel.Item>
    <Carousel.Item>
      <img src={slide03} alt="Third Slide" />
    </Carousel.Item>
  </Carousel>
</CarouselContainer>
  )
}

export default Slider

const CarouselContainer = styled.div`
    height: 70vh;
    object-fit: contain;
    size-adjust: center;
`

Problem solved. I fixed it with passing css properties to photos:

        max-height: 60vh;
        max-width: 100vw;
        height: auto;
        width: 100%;
        object-fit: cover;