diff --git a/README.md b/README.md index 00e7a74..2593e0e 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ The following options are available through the YAML codeblock: - The side on which the avatar will be displayed. Optional, defaults to `"left"`. - `size?: "small" | "medium" | "large" | number` - The size of the avatar. May be either `small` (180x180px), `medium` (240x240px), `large` (320x320px), or any custom width as a number. Optional, defaults to `medium`. +- `objectPosition?: string` + - How to position the image within the square container surrounding it. For example, `"left"` would show the left side of a landscape picture, `"right"` the right side. Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-position for more information. ## Installation diff --git a/src/components/AvatarView.svelte b/src/components/AvatarView.svelte index 867e510..c9ff78e 100644 --- a/src/components/AvatarView.svelte +++ b/src/components/AvatarView.svelte @@ -31,6 +31,16 @@ * @default "medium" */ size?: "small" | "medium" | "large" | number; + /** + * Alignment of the avatar image within the container. + * + * Corresponds to the `object-position` CSS property. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position + * + * @default "50% 50%" + */ + objectPosition?: string; description: string; } @@ -57,6 +67,7 @@ }[state.size] : state.size : 240; + $: objectPosition = state.objectPosition; onMount(() => { inSourceMode = isSourceMode(); @@ -130,6 +141,7 @@ alt="Avatar" style:width={`${avatarSize}px`} style:height={`${avatarSize}px`} + style:object-position={objectPosition} src={state.image ? normalizeImgPath(state?.image) : fallbackImage} /> {#if inSourceMode && hoverOnImage}