change image to picture - fixes #6

surjithctly · Jan 11, 2023 · 789e127 · 789e127 · vercel · Jan 11, 2023
1 parent f13ba93
commit 789e127
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -2,7 +2,7 @@
 import Layout from "@layouts/Layout.astro";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
-import { Image } from "@astrojs/image/components";
+import { Picture } from "@astrojs/image/components";
 
 const TeamImg1 =
   "https://images.unsplash.com/photo-1580489944761-15a19d654956?&fit=crop&w=280";
@@ -64,11 +64,15 @@ const team = [
         team.map((item) => (
           <div class="group">
             <div class="w-full aspect-square">
-              <Image
+              <Picture
                 {...item.avatar}
                 format="avif"
                 alt="Team"
+                widths={[200, 400]}
+                aspectRatio="1:1"
+                sizes="(max-width: 800px) 100vw, 400px"
                 class="w-full h-full object-cover rounded transition  group-hover:-translate-y-1 group-hover:shadow-xl"
+                format="avif"
               />
             </div>