How to change size of image component with react-bootstrap

I'm using React Bootstrap for the first time ever so bear with me and thanks for the help!

My image is currently too large and I'm looking to alter it so that the width is smaller and the height adjusts accordingly. Also-- will 'fluid' allow the image to maintain its proportions if being seen on a mobile device?

In my Home component, I have the following code:

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

function Home() {
    return (
        <Container fluid className="d-flex justify-content-center">
            <Row>
                <Image
                    roundedCircle
                    fluid
                    src={'/me.jpg'}
                    alt="me"
                />
            </Row>
        </Container>
    )
}

export default Home;

Prior to importing the Container and Row components, I had the Image component accepting width="50%" height="auto" which altered my image to the desired size. Once I added in the Container and Row components, the image went back to its original size and I can't figure out what to pass in to change it.

Thank you!

Solution

You can wrap the image with Col instead of d-flex because d-flex already default size settings.

Example :

 <Container fluid>
        <Row>
            <Col className="text-center"> // text-center use for centering image
            <Image
                roundedCircle
                fluid
                src={'/me.jpg'}
                alt="me"
                width="50%"
            />
            <Col>
        </Row>
    </Container>

For more information: Why don't flex items shrink past content size?