How to automatically cutoff image if it's beyond screen height React Bootstrap?

Question

I am trying to create a personal website where the first thing you see is a picture slideshow using a Carousel on the rightmost 10 columns of the screen. I want the images to take up the entire width of the rightmost 10 columns, however, only take up the height of the screen; it should maintain aspect ratio by just cutting off the image when it exceeds the screen height. What I have so far does exactly what I want EXCEPT cutoff the picture height if it goes past the end of the screen.

I have tried playing around with max height and view height of the images, row, and columns in a number of different ways/combinations, but it doesn't seem to be taking.

Here is the code for the carousel:

import React, { Component } from 'react'

import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

import Carousel from 'react-bootstrap/Carousel'
import Image from 'react-bootstrap/Image'

import img1 from '../assets/Home/img1.jpg'
import img2 from '../assets/Home/img2.jpg'
import img3 from '../assets/Home/img3.jpg'


export default class home extends Component {
    render() {
        return (
            <Container fluid>
                <div className="vh-100">
                <Row className="row">
                    <Col className="col-2"></Col>
                    <Col className="col-10 px-0 align-items-start">
                        <Carousel>
                            <Carousel.Item>
                                <Image className="mh-100" src={img1} fluid />

                                <Carousel.Caption>
                                    <h3>First slide label</h3>
                                    <p>Description of image.</p>
                                </Carousel.Caption>

                            </Carousel.Item>

                            <Carousel.Item>
                                <Image className="mh-100" src={img2} fluid />

                                <Carousel.Caption>
                                    <h3>Second slide label</h3>
                                    <p>Description of image.</p>
                                </Carousel.Caption>
                            </Carousel.Item>

                            <Carousel.Item>
                                <Image className="mh-100" src={img3} fluid />

                                <Carousel.Caption>
                                    <h3>Third slide label</h3>
                                    <p>Description of image.</p>
                                </Carousel.Caption>
                            </Carousel.Item>
                        </Carousel>
                    </Col>
                </Row></div>
            </Container>
        )
    }
}

Any information/guidance would be helpful. Thank you.

Answer 1

So my solution, kind of, was just abandoning attempting to style it with react-bootstrap and used raw css to style the image like this:

img.slide {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 100vh;
}