34 lines
705 B
Plaintext
34 lines
705 B
Plaintext
---
|
|
import { type UnresolvedImageTransform } from "astro";
|
|
import type { HTMLTag } from "astro/types";
|
|
import { getImage } from "astro:assets";
|
|
|
|
type Props = UnresolvedImageTransform & {
|
|
tag?: HTMLTag;
|
|
id?: string;
|
|
class?: string;
|
|
};
|
|
|
|
const { tag: Tag = "span", id, class: className, ...transform } = Astro.props;
|
|
const {
|
|
src,
|
|
options: { width, height },
|
|
} = await getImage({ format: "jpeg", ...transform });
|
|
---
|
|
|
|
<style>
|
|
.image {
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
</style>
|
|
|
|
<Tag
|
|
id={id}
|
|
class:list={["image", className]}
|
|
style={{
|
|
aspectRatio: width && height ? width / height : undefined,
|
|
backgroundImage: `url(${JSON.stringify(src)})`,
|
|
}}
|
|
/>
|