比率が50:50でよければビルトインの `layout: image-left` が利用できる。比率を指定したい場合は、`layouts/image-left.vue` を自作してoverrideする。
```html
<script setup lang="ts">
import { computed } from "vue";
const props = withDefaults(
defineProps<{
image?: string;
backgroundSize?: string;
backgroundPosition?: string;
ratio?: string;
}>(),
{
backgroundSize: "cover",
backgroundPosition: "center",
ratio: "50%",
},
);
const resolveAssetUrl = (url: string): string => {
if (url.startsWith("/")) {
return `${import.meta.env.BASE_URL}${url.slice(1)}`;
}
return url;
};
const imageStyle = computed(() => ({
backgroundImage: props.image
? `url("${resolveAssetUrl(props.image)}")`
: undefined,
backgroundRepeat: "no-repeat",
backgroundPosition: props.backgroundPosition,
backgroundSize: props.backgroundSize,
}));
const gridStyle = computed(() => ({
display: "grid",
gridTemplateColumns: `${props.ratio}% 1fr`,
}));
</script>
<template>
<div
class="slidev-layout h-full w-full gap-[1.5em] !py-0 !pl-0"
:style="gridStyle"
>
<div class="h-full" :style="imageStyle" />
<div class="py-[1em] pr-[2em]">
<slot />
</div>
</div>
</template>
```
```markdown
# 左25が画像の例
---
layout: image-left
image: https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/colot.webp
background-size: cover
ratio: 25%
---
```