allow user to position image within container

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. <small>Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-position for more information.</small>
 
 ## Installation
 

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}