css - 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 提供的默认类，用于使其响应式。