Fix image

* update post

components/mdx/Image.module.css

@@ -0,0 +1,15 @@
+.imageContainer {
+  width: 100%;
+  padding: 10px 0;
+}
+
+.imageContainer > span {
+  position: unset !important;
+}
+
+.imageContainer .image {
+  object-fit: contain;
+  width: 100% !important;
+  position: relative !important;
+  height: unset !important;
+}

components/mdx/Image.tsx

@@ -1,5 +1,6 @@
 import NextImage from 'next/image';
 import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import styles from './Image.module.css';
 
 interface Props
   extends DetailedHTMLProps<
@@ -10,14 +11,15 @@ interface Props
 const Image = ({ src, alt }: Props) => {
   return (
     <>
-      <NextImage
-        src={src ?? ''}
-        alt={alt}
-        layout="responsive"
-        width="100%"
-        height="100%"
-      />
-      <span className="block text-center text-gray-400">{alt}</span>
+      <p className={styles.imageContainer}>
+        <NextImage
+          src={src ?? ''}
+          alt={alt}
+          layout="fill"
+          className={styles.image}
+        />
+        <span className="block text-center text-gray-400">{alt}</span>
+      </p>
     </>
   );
 };