mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

change image to picture - fixes #6

Browse Source
This commit is contained in:
Surjith S M
2023-01-11 13:53:03 +05:30
parent f13ba93201
commit 789e127ca7
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/about.astro
View File

@@ -2,7 +2,7 @@
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro"; import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro"; import Sectionhead from "@components/sectionhead.astro";
import { Image } from "@astrojs/image/components"; import { Picture } from "@astrojs/image/components";
const TeamImg1 = const TeamImg1 =
"https://images.unsplash.com/photo-1580489944761-15a19d654956?&fit=crop&w=280"; "https://images.unsplash.com/photo-1580489944761-15a19d654956?&fit=crop&w=280";
@@ -64,11 +64,15 @@ const team = [
team.map((item) => ( team.map((item) => (
<div class="group"> <div class="group">
<div class="w-full aspect-square"> <div class="w-full aspect-square">
<Image <Picture
{...item.avatar} {...item.avatar}
format="avif" format="avif"
alt="Team" 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" class="w-full h-full object-cover rounded transition group-hover:-translate-y-1 group-hover:shadow-xl"
format="avif"
/> />
</div> </div>