i18n(zh-cn): update responsive-images.mdx

src/content/docs/zh-cn/reference/experimental-flags/responsive-images.mdx

@@ -24,7 +24,64 @@ import Since from '~/components/Since.astro'
 }
 ```
 
-启用此标志后，你可以传入 `layout` 属性到任意 `<Image />` 或 `<Picture />` 组件以创建响应式图像。
+启用此标志后，你可以访问额外的 [图像配置设置](#响应式图像配置设置) 来控制 Astro 处理和优化的所有图像的默认行为：
+
+- 使用 [Markdown `![]()` 语法](/zh-cn/guides/images/#markdown-文件中的图像)的本地和远程图像。
+- [`<Image />`](/zh-cn/guides/images/#使用-image--组件显示优化后的图像) 和 [`<Picture />`](/zh-cn/guides/images/#使用-picture--组件创建响应式图像) 组件。
+
+此外，Astro 的图像组件可以接收 [响应式图像属性](#响应式图像属性) 以覆盖每个图像的默认值。
+
+你的 `public/` 文件夹中的图像永远不会被优化，且不支持响应式图像。
+
+## 响应式图像配置设置
+
+通过设置 [`image.experimentalLayout`](/zh-cn/reference/configuration-reference/#imageexperimentallayout) 指定默认布局 (`responsive`，`fixed`，或 `full-width`) 以在整个项目中启用响应式图像。
+
+如果未配置此值，仍然可以为任何 `<Image />` 或 `<Picture />` 组件传递 `layout` 属性以创建响应式图像。但是，Markdown 图像将不会是响应式的。
+
+此外，可以配置 [`image.experimentalObjectFit`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectfit) 和 [`image.experimentalObjectPosition`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectposition) ，这将默认应用于所有处理后的图像。
+
+每项设置都能通过属性在单个的 `<Image />` 或 `<Picture />` 组件上被覆盖，但是所有 Markdown 图像将始终使用默认设置。
+
+```js title="astro.config.mjs"
+{
+  image: {
+    // 用于所有 Markdown 图像，不可按图像配置
+    // 用于所有 `<Image />` 和 `<Picture />` 组件，除非通过属性覆盖
+    experimentalLayout: 'responsive',
+  },
+  experimental: {
+    responsiveImages: true,
+  },
+}
+```
+
+## 响应式图像属性
+
+当启用响应式图像时，有这些可用于 `<Image />` 和 `<Picture />` 组件的附加属性：
+
+- `layout`：图像的布局类型。可设置为 `responsive`、`fixed`、`full-width` 或 `none`。默认为 [`image.experimentalLayout`](/zh-cn/reference/configuration-reference/#imageexperimentallayout) 的值。
+- `fit`：定义在宽高比更改时应如何裁剪图像。该值与 CSS `object-fit` 的值匹配。默认为 `cover` 或 [`image.experimentalObjectFit`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectfit) 的值（如果设置）。
+- `position`：定义宽高比更改时图像裁剪的位置。该值与 CSS `object-position` 的值匹配。默认为 `center` 或 [`image.experimentalObjectPosition`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectposition)（如果设置）。
+- `priority`：如果设置该项，则立即加载图像。否则图像将被懒加载。可将其用于最大的首屏图像。默认为 `false`。
+
+`widths` 和 `sizes` 属性是基于图像的尺寸和布局类型自动生成的，大部分情况下不应手动设置。针对于 `responsive` 和 `full-width` 图像而生成的 `sizes` 属性是基于这样的假设：当视口小于图像的宽度时，图像以接近屏幕的全宽显示。如果明显不同时（例如，如果它在小屏幕上采用多列布局），你可能需要手动调整 `size` 属性以获得最佳结果。
+
+`densities` 属性无法与响应式图像兼容，如果设置则会被忽略。
+
+例如，将 `responsive` 设置为默认布局后，你可以覆盖任何单个图像的 `layout` 属性：
+
+```astro
+---
+import { Image } from 'astro:assets';
+import myImage from '../assets/my_image.png';
+---
+<Image src={myImage} alt="将会使用 responsive 布局" width={800} height={600} />
+<Image src={myImage} alt="将会使用 full-width 布局" layout="full-width" />
+<Image src={myImage} alt="将会禁用响应式图像" layout="none" />
+```
+
+## 生成的响应式图像 HTML 输出
 
 设置布局（layout）后，图像会根据图像的尺寸和布局类型自动生成 `srcset` 和 `size` 属性。具有 `responsive` 和 `full-width` 布局属性的图像将应用样式，以确保它们根据容器来调整大小。
 
@@ -83,45 +140,4 @@ import myImage from '../assets/my_image.png';
 }
 ```
 
-## 响应式图像属性
-
-当启用响应式图像时，有这些可用于 `<Image />` 和 `<Picture />` 组件的附加属性：
-
-- `layout`：图片的布局类型。可设置为 `responsive`、`fixed`、`full-width` 或 `none`。默认为 [`image.experimentalLayout`](/zh-cn/reference/configuration-reference/#imageexperimentallayout) 的值。
-- `fit`：定义在宽高比更改时应如何裁剪图像。该值与 CSS `object-fit` 的值匹配。默认为 `cover` 或 [`image.experimentalObjectFit`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectfit) 的值（如果设置）。
-- `position`：定义宽高比更改时图像裁剪的位置。该值与 CSS `object-position` 的值匹配。默认为 `center` 或 [`image.experimentalObjectPosition`](/zh-cn/reference/configuration-reference/#imageexperimentalobjectposition)（如果设置）。
-- `priority`：如果设置该项，则立即加载图像。否则图片将被懒加载。可将其用于最大的首屏图像。默认为 `false`。
-
-`widths` 和 `sizes` 属性是基于图片的尺寸和布局类型自动生成的，大部分情况下不应手动设置。针对于 `responsive` 和 `full-width` 图像而生成的 `sizes` 属性是基于这样的假设：当视口小于图像的宽度时，图像以接近屏幕的全宽显示。如果明显不同时（例如，如果它在小屏幕上采用多列布局），你可能需要手动调整 `size` 属性以获得最佳结果。
-
-`densities` 属性无法与响应式图像兼容，如果设置则会被忽略。
-
-## 响应式图像配置设置
-
-你可以通过设置 [`image.experimentalLayout`](/zh-cn/reference/configuration-reference/#imageexperimentallayout) 的默认值来为所有 `<Image />` 和 `<Picture />` 组件启用响应式图像。每个组件上的布局属性可以覆盖此设置。该设置可以被每个组件上 `layout` 的属性覆盖。
-
-```js title="astro.config.mjs"
-{
-  image: {
-    // 用于所有的 `<Image />` 和 `<Picture />` 组件，除非被覆盖
-    experimentalLayout: 'responsive',
-     },
-  experimental: {
-    responsiveImages: true,
-  },
-}
-```
-
-将 `responsive` 设置为默认布局后，你可以覆盖任何单个图像的 `layout` 属性：
-
-```astro
----
-import { Image } from 'astro:assets';
-import myImage from '../assets/my_image.png';
----
-<Image src={myImage} alt="This will use responsive layout" width={800} height={600} />
-<Image src={myImage} alt="This will use full-width layout" layout="full-width" />
-<Image src={myImage} alt="This will disable responsive images" layout="none" />
-```
-
 有关完整概述以及提供有关此实验性 API 的反馈，请参阅 [响应式图像 RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md)。