From fb5fe00f166dd6a889e2857dcf602d87a14e20f1 Mon Sep 17 00:00:00 2001 From: sarah11918 <5098874+sarah11918@users.noreply.github.com> Date: Thu, 19 Jun 2025 10:58:23 +0000 Subject: [PATCH] ci: update reference docs --- .../en/reference/configuration-reference.mdx | 44 ++++++++++++------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index 70098480f890d..876ef4f3f4a86 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -1133,64 +1133,76 @@ You can use wildcards to define the permitted `hostname` and `pathname` values a - End with '/**' to allow all sub-routes ('startsWith'). - End with '/*' to allow only one level of sub-route. -### image.experimentalLayout +### image.layout

**Type:** `ImageLayout`
-**Default:** `undefined` +**Default:** `undefined`
+

The default layout type for responsive images. Can be overridden by the `layout` prop on the image component. -Requires the `experimental.responsiveImages` flag to be enabled. - `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. -### image.experimentalObjectFit +See [the `layout` component property](/en/reference/modules/astro-assets/#layout) for more details. + +### image.objectFit

**Type:** `ImageFit`
-**Default:** `"cover"` +**Default:** `"cover"`
+

The default object-fit value for responsive images. Can be overridden by the `fit` prop on the image component. -Requires the `experimental.responsiveImages` flag to be enabled. +Requires a value for `layout` to be set. -### image.experimentalObjectPosition +See [the `fit` component property](/en/reference/modules/astro-assets/#fit) for more details. + +### image.objectPosition

**Type:** `string`
-**Default:** `"center"` +**Default:** `"center"`
+

The default object-position value for responsive images. Can be overridden by the `position` prop on the image component. -Requires the `experimental.responsiveImages` flag to be enabled. +Requires a value for `layout` to be set. + +See [the `position` component property](/en/reference/modules/astro-assets/#position) for more details. -### image.experimentalBreakpoints +### image.breakpoints

**Type:** `Array`
-**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]`
+

-The breakpoints used to generate responsive images. Requires the `experimental.responsiveImages` flag to be enabled. The full list is not normally used, +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. -### image.experimentalDefaultStyles +### image.responsiveStyles

**Type:** `boolean`
-**Default:** `true` +**Default:** `false`
+

-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. +Whether to automatically add global styles for responsive images. You should enable this option unless you are styling the images yourself. +This option is only used when `layout` is set to `constrained`, `full-width`, or `fixed` using the configuration or the `layout` prop on the image component. + +See [the images docs](/en/guides/images/#responsive-image-styles) for more information. ## Markdown Options