From c1b342d5c1d40a856042957372c36b32d5a2f9b5 Mon Sep 17 00:00:00 2001
From: Feng Kaiyu <loveress01@outlook.com>
Date: Mon, 13 Feb 2023 11:12:09 +0800
Subject: [PATCH] fix(404): fix wrong image size.

---
 components/Page404.tsx       | 17 +++++++++++++----
 components/styles.module.css |  3 ++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/Page404.tsx b/components/Page404.tsx
index f74d0b6..c874ced 100644
--- a/components/Page404.tsx
+++ b/components/Page404.tsx
@@ -5,6 +5,7 @@ import * as types from '@/lib/types'
 
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
+import errImg from 'public/404.png'
 
 export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
   const title = site?.name || 'Notion Page Not Found'
@@ -28,11 +29,19 @@ export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
             )
           )}
 
-          <Image
-            src='/404.png'
-            alt='404 Not Found'
+          <div
             className={styles.errorImage}
-          />
+          >
+            <Image
+              src={errImg}
+              alt='404 Not Found'
+              width={errImg.width}
+              height={errImg.height}
+              sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+            />
+          </div>
         </main>
       </div>
     </>
diff --git a/components/styles.module.css b/components/styles.module.css
index 021d7bc..4fde52d 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -37,7 +37,8 @@
 }
 
 .errorImage {
-  max-width: 100%;
+  margin: 0 auto;
+  max-width: 700px;
   width: 640px;
 }