import React, { FunctionComponent, useRef } from 'react';
import { ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Image, Text, Flex, Link } from '@chakra-ui/react';
import useResizeObserver from 'use-resize-observer';

interface ImageModalProps {
  src: string;
}

const ImageModal: FunctionComponent<ImageModalProps> = ({ src }: ImageModalProps) => {
  const placeholder = useRef<HTMLDivElement>(null);
  const { width = 0, height = 0 } = useResizeObserver<HTMLDivElement>({ ref: placeholder });

  return (
    <>
      <ModalHeader>Image</ModalHeader>
      <ModalCloseButton />
      <ModalBody ref={placeholder}>
        <Flex position="absolute" width={width} height={height} alignItems="center" justifyContent="center">
          <Image maxHeight="100%" objectFit="scale-down" src={src} />
        </Flex>
      </ModalBody>
      <ModalFooter justifyContent="center">
        <Text fontSize="sm">
          <Link href={src}>{src}</Link>
        </Text>
      </ModalFooter>
    </>
  );
};

export default ImageModal;

import React, { FunctionComponent } from 'react';
import { ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Image, Text, Flex, Link } from '@chakra-ui/react';

interface ImageModalProps {
  src: string;
}

const ImageModal: FunctionComponent<ImageModalProps> = ({ src }: ImageModalProps) => {
  return (
    <>
      <ModalHeader>Image</ModalHeader>
      <ModalCloseButton />
      <ModalBody>
        <Flex height="100%" alignItems="center">
          <Image flex="1" maxHeight="100%" objectFit="scale-down" src={src} />
        </Flex>
      </ModalBody>
      <ModalFooter justifyContent="center">
        <Text fontSize="sm">
          <Link href={src}>{src}</Link>
        </Text>
      </ModalFooter>
    </>
  );
};

export default ImageModal;

--- 
+++ 
@@ -1,18 +1,22 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useRef } from 'react';
 import { ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Image, Text, Flex, Link } from '@chakra-ui/react';
+import useResizeObserver from 'use-resize-observer';
 
 interface ImageModalProps {
   src: string;
 }
 
 const ImageModal: FunctionComponent<ImageModalProps> = ({ src }: ImageModalProps) => {
+  const placeholder = useRef<HTMLDivElement>(null);
+  const { width = 0, height = 0 } = useResizeObserver<HTMLDivElement>({ ref: placeholder });
+
   return (
     <>
       <ModalHeader>Image</ModalHeader>
       <ModalCloseButton />
-      <ModalBody>
-        <Flex height="100%" alignItems="center">
-          <Image flex="1" maxHeight="100%" objectFit="scale-down" src={src} />
+      <ModalBody ref={placeholder}>
+        <Flex position="absolute" width={width} height={height} alignItems="center" justifyContent="center">
+          <Image maxHeight="100%" objectFit="scale-down" src={src} />
         </Flex>
       </ModalBody>
       <ModalFooter justifyContent="center">
Fix image size in preview
