Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 11 additions & 25 deletions src/content/docs/en/reference/configuration-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1154,12 +1154,11 @@ See [the Images guide](/en/guides/images/#responsive-image-styles) for more info
<p>

**Type:** `ImageLayout`<br />
**Default:** `undefined`
**Default:** `undefined`<br />
<Since v="5.10.0" />
</p>

The default `layout` type for responsive images. Can be overridden by the `layout` prop on an individual image component.

The default layout type for responsive images. Can be overridden by the `layout` prop on the image component.
- `constrained` - The image will scale to fit the container, maintaining its aspect ratio, but will not exceed the specified dimensions.
- `fixed` - The image will maintain its original dimensions.
- `full-width` - The image will scale to fit the container, maintaining its aspect ratio.
Expand All @@ -1171,25 +1170,25 @@ See [the `layout` component property](/en/reference/modules/astro-assets/#layout
<p>

**Type:** `ImageFit`<br />
**Default:** `"cover"`
**Default:** `"cover"`<br />
<Since v="5.10.0" />
</p>

The default [`object-fit` CSS property value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for responsive images. Can be overridden by the `fit` prop on an individual image component.
The default object-fit value for responsive images. Can be overridden by the `fit` prop on the image component.
Requires a value for `layout` to be set.

See [the `fit` component property](/en/reference/modules/astro-assets/#fit) for more details.


### image.objectPosition

<p>

**Type:** `string`<br />
**Default:** `"center"`
**Default:** `"center"`<br />
<Since v="5.10.0" />
</p>

The default [`object-position` CSS property value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) for responsive images. Can be overridden by the `position` prop on an individual image component.
The default [`object-position` CSS property value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) for responsive images. Can be overridden by the `position` prop on an individual image component. Requires a value for `layout` to be set.

See [the `position` component property](/en/reference/modules/astro-assets/#position) for more details.

Expand All @@ -1198,26 +1197,13 @@ See [the `position` component property](/en/reference/modules/astro-assets/#posi
<p>

**Type:** `Array<number>`<br />
**Default:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]`
**Default:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]`<br />
<Since v="5.10.0" />
</p>

The breakpoints used to generate responsive images.

The full list of breakpoints is not normally used but instead is filtered according to the source and output size. The defaults used depend on whether a local or remote image service is used.

For remote services, more breakpoints are included because only the required sizes will actually be generated. For local services, the list of breakpoints is shorter to reduce the number of images generated.

### image.experimentalDefaultStyles

<p>

**Type:** `boolean`<br />
**Default:** `true`
</p>

Whether to automatically add global styles to ensure that experimental images resize correctly. This is enabled by default, but can be disabled if you want to manage the styles yourself.
This option is only used when the `experimental.responsiveImages` flag is enabled.
The breakpoints used to generate responsive images. Requires a value for `layout` to be set. The full list is not normally used,
but is filtered according to the source and output size. The defaults used depend on whether a local or remote image service is used. For remote services
the more comprehensive list is used, because only the required sizes are generated. For local services, the list is shorter to reduce the number of images generated.

## Markdown Options

Expand Down