47 lines
812 B
Plaintext
47 lines
812 B
Plaintext
---
|
|
import type { ImageMetadata } from "astro";
|
|
import { Image as AstroImage } from "astro:assets";
|
|
interface Props {
|
|
src: ImageMetadata;
|
|
alt: string;
|
|
maxWidth?: number;
|
|
}
|
|
|
|
const { src, alt, maxWidth } = Astro.props;
|
|
|
|
const image = typeof src === "string" ? await import(src) : src;
|
|
|
|
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>
|