Astro Info

Astro                    v6.1.3
Vite                     v7.3.1
Node                     v24.14.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap (v3.7.2)
                         @astrojs/mdx (v5.0.3)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Documentation on https://docs.astro.build/en/guides/images/#responsive-image-styles states that "You can override the object-fit and object-position styles on a per-image basis by setting the fit and position props on the or component."

Fit props work but position props do not.

When using this component, data-astro-image-pos="left" is correctly output in the HTML, however there are no styles to support it (because you cannot reasonably pre-emptively build all the possible styles for this setting)

import { Picture, Image } from 'astro:assets';
import testImg from '../../assets/img/test.jpg';

<Picture src={testImg} alt="" layout="constrained" fit="contain" position="left" />

https://github.com/withastro/astro/blob/23425e2413b25cd304b64b4711f86f3f889546ff/packages/astro/src/assets/utils/generateImageStylesCSS.ts will correctly generate default styles for the fit options, and correctly pick up any settings in astro.config.mjs from image.objectPosition, but there is nothing that creates styles for data-astro-image-pos.

What's the expected result?

Expected: the object position gets set when the position attribute is on the element

The possibilities for settings for object-position are not something from a fixed enum, unlike the fit options. The presence of the position attribute on the Image or Picture component might need converted into an inline style instead of (or in addition to) creating a data attribute

Link to Minimal Reproducible Example

https://github.com/debugwand/image-position-bug/

Participation

• I am willing to submit a pull request for this issue.