fix : astro image position prop bug

.changeset/three-cities-obey.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes the `position` prop on `<Image />` and `<Picture />` components to correctly apply `object-position` styles

packages/astro/src/assets/internal.ts

@@ -169,9 +169,32 @@ export async function getImage(
 			resolvedOptions['data-astro-image-fit'] = resolvedOptions.fit;
 		}
 
+		// Always output 'data-astro-image-pos', defaulting to 'center' if unspecified.
+		// This ensures compatibility with existing CSP tests and allows consistent CSS control.
+		const currentPosition = resolvedOptions.position || 'center';
+		resolvedOptions['data-astro-image-pos'] = currentPosition.replace(/\s+/g, '-');
+
 		if (resolvedOptions.position) {
 			// Normalize position value for data attribute (spaces to dashes)
-			resolvedOptions['data-astro-image-pos'] = resolvedOptions.position.replace(/\s+/g, '-');
+			// Apply object-position as inline style since position values are arbitrary
+			// and cannot be pre-enumerated in a static stylesheet like fit values can.
+			if (typeof resolvedOptions.style === 'object' && resolvedOptions.style !== null) {
+				if (!('objectPosition' in resolvedOptions.style)) {
+					resolvedOptions.style = {
+						...resolvedOptions.style,
+						objectPosition: resolvedOptions.position,
+					};
+				}
+			} else {
+				const existingStyle =
+					typeof resolvedOptions.style === 'string' ? resolvedOptions.style : '';
+				if (!existingStyle.includes('object-position')) {
+					const positionStyle = `object-position: ${resolvedOptions.position}`;
+					resolvedOptions.style = existingStyle
+						? existingStyle.replace(/;?\s*$/, '; ') + positionStyle
+						: positionStyle;
+				}
+			}
 		}
 	}
 

packages/astro/test/units/assets/getImage.test.ts

@@ -277,6 +277,39 @@ describe('getImage', () => {
 			assert.equal(result.attributes.fit, undefined);
 			assert.equal(result.attributes.position, undefined);
 		});
+
+		it('includes object-position in style attribute when position is provided', async () => {
+			const result = await renderImage({
+				src: 'https://example.com/photo.jpg',
+				width: 300,
+				height: 400,
+				alt: 'Position test',
+				layout: 'constrained',
+				position: 'left top',
+			});
+
+			assert.match(
+				result.attributes.style,
+				/object-position:\s*left top/
+			);
+		});
+
+		it('merges position into existing style object without overwriting', async () => {
+			const result = await renderImage({
+				src: 'https://example.com/photo.jpg',
+				width: 300,
+				height: 400,
+				alt: 'Merge test',
+				layout: 'constrained',
+				position: 'top right',
+				style: { color: 'red' },
+			});
+
+			assert.deepStrictEqual(result.attributes.style, {
+				color: 'red',
+				objectPosition: 'top right'
+			});
+		});
 	});
 
 	describe('format', () => {