42 lines
764 B
Plaintext
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(", ")}
|
|
/>
|