resize image based on screen sizes

Tietokilta · Jan 25, 2024 · 56714df · 56714df
1 parent 06bfdce
commit 56714df
Showing 1 changed file with 9 additions and 11 deletions.
diff --git a/web/components/Header.tsx b/web/components/Header.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
 import { fetchAPI } from "../lib/api";
 
-import { StrapiBaseType, StrapiImage, StrapiResponse } from "../utils/models";
 import Image from "next/image";
+import { StrapiBaseType, StrapiImage, StrapiResponse } from "../utils/models";
 
 type Response = StrapiBaseType<{
   header: StrapiResponse<StrapiImage[]>;
@@ -39,16 +39,14 @@ const Header = async ({ children, locale }: PropType) => {
       <div className="w-fit p-1 flex gap-4">{children}</div>
       <Link href={`/${locale}`}>
         {header && (
-          <div className="relative w-full h-96">
-            <Image
-              fill={true}
-              alt="header"
-              src={header?.url}
-              className="object-cover"
-              sizes="50wv"
-              priority={true}
-            />
-          </div>
+          <Image
+            alt="header"
+            src={header?.url}
+            width={header?.width ?? 0}
+            height={header?.height ?? 0}
+            className="object-contain"
+            priority={true}
+          />
         )}
         <p className="py-10 text-3xl text-secondary-800 dark:text-secondary-50">
           {data?.attributes.headerTitle}