React-bootstrap Modal 在缩放以兼容移动显示时不适用于图像内容

Question

任何人，请帮助，我正在尝试显示画廊中小图像的完整图像。

当我缩放显示模态时，即使我在模态中使用图像，图像也无法根据模态调整大小。缩放时图像重叠。

即使我删除宽度也不起作用

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="..." className="img-fluid" > 

这是默认类，由 Bootstrap 提供以使其具有响应性。