website/src/components/Image.astro
2024-04-03 16:18:30 +02:00

42 lines
764 B
Plaintext

---
import type { ImageMetadata } from "astro";
import { Picture as AstroImage } from "astro:assets";
interface Props {
src: ImageMetadata;
alt: string;
class?: string;
caption?: string;
maxWidth?: number;
}
const { src: image, alt, maxWidth } = Astro.props;
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}
class={Astro.props.class}
widths={sizes.map((size) => size.width)}
sizes={sizes
.map((size) => `${size.media || "100vw"} ${size.width}px`)
.join(", ")}
/>