React- bootstrap Модал не работает с содержимым изображения при масштабировании для совместимого с мобильным дисплеем

Question

Кто-нибудь, пожалуйста, помогите, я пытаюсь отобразить полное изображение небольшого изображения, которое находится в галерее.

Когда я масштабирую дисплей, Modal автоматически изменяет размер, и изображение не может изменить размер согласно модалу даже я использую изображение внутри модала. Изображение перекрывается при масштабировании.

Даже при удалении ширины также не работает

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

Примените этот класс к изображению

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

, которое является классом по умолчанию, предоставленным Bootstrap для обеспечения его адаптивности.