React-bootstrap Modal is not working with image content while scaling for mobile display compatible

Question

Anyone, please help, I am trying to display the full image of a small image which are in the gallery.

When I scale the display Modal is auto-resize and the image is not able to resize according to Modal even I use the image inside the Modal. Image overlapping while scaling.

Even I remove width also not workin

function Modalcenter(props) {
    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Decoration
          </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <img src={G1s} alt="G1s" width="1080" />
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
}

function Example() {
    const [modalShow, setModalShow] = React.useState(false);

    return (
        <>
            <img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />

            <Modalcenter
                show={modalShow}
                onHide={() => setModalShow(false)}
            />
        </>
    );
}

Answer 1

Apply this class to the image

<img src="..." className="img-fluid" > 

which is the default class, provided by Bootstrap for making it responsive.