website/src/components/Image.astro

46 lines
773 B
Plaintext
Raw Normal View History

2024-03-27 01:51:42 +01:00
---
import type { ImageMetadata } from "astro";
import { Image as AstroImage } from "astro:assets";
interface Props {
src: ImageMetadata;
alt: string;
2024-03-28 18:30:52 +01:00
caption?: string;
2024-03-27 01:51:42 +01:00
maxWidth?: number;
}
2024-03-28 18:30:52 +01:00
const { src: image, alt, maxWidth } = Astro.props;
2024-03-27 01:51:42 +01:00
const sizes = [
{
width: 240,
media: "(max-width: 360px)",
},
{
width: 540,
media: "(max-width: 720px)",
},
{
width: 720,
media: "(max-width: 1600px)",
},
{
width: image.width,
},
].filter((size) => !maxWidth || size.width <= maxWidth);
---
<AstroImage
src={image}
alt={alt}
widths={sizes.map((size) => size.width)}
sizes={sizes
.map((size) => `${size.media || "100vw"} ${size.width}px`)
.join(", ")}
/>
<style>
img {
border-radius: 0.5rem;
}
</style>