Can someone please assist me with displaying the full image of a small image located in the gallery?
Whenever I try to scale the display, the Modal automatically resizes but the image does not resize accordingly. The image ends up overlapping when scaling.
Even after removing the width attribute, it is still not working.
function CenteredModal(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)} />
<CenteredModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}