I want to click images to open a modal as image previews, so the modal has no margin and padding just shows one whole image preview.

But the problem I have is the image size...

Initially, after clicking the modal open button, I get the images' width and height and overwrite values for width and height.

But some images are 5000px width x 3000px height which is too big for a screen and I use this image preview for not only laptops but also iPad or bigger screens size.

How do you define the size of the image for different screen sizes?

Now the width and height values are fixed.

If the width is bigger than , I set width 800 px and height 500px.

If the height is bigger than width, I set width 500px and height 800px.

and style object-fit: cover but the chance is the image could be square...

const Attachment =() =>{
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);

  const handleOpenModal = () => {
    setOpenModal(true);
    getMeta(attachmentCdnUrl);
  };

  function getMeta(url) {
    const img = new Image();
    img.addEventListener('load', function () {
      setWidth(800);
      setHeight(500);
      if (this.naturalWidth > this.naturalHeight) {
        setWidth(800);
        setHeight(500);
      } else {
        setHeight(800);
        setWidth(500);
      }
    });
    img.src = url;
  }
  return(
    ...
  
      <Modal
          open={openModal}
          onClose={handleCloseModal}
          aria-labelledby="child-modal-title"
          aria-describedby="child-modal-description"
        >
          <Box
            sx={{
              ...style,  // here to overwrite width and height
              width: width,
              height: height,
            }}
          >
            <img
              src={attachmentCdnUrl} // here to overwrite width and height
              style={{
                ...style,
                width: width,
                height: height,
              }}
            />
          </Box>
        </Modal>
    ...
  )
}

This code doesn't look exactly the same so just pasting this won't work.