diff --git a/src/content/docs/zh-cn/reference/configuration-reference.mdx b/src/content/docs/zh-cn/reference/configuration-reference.mdx index 148125aee87d7..e297c9d42ca20 100644 --- a/src/content/docs/zh-cn/reference/configuration-reference.mdx +++ b/src/content/docs/zh-cn/reference/configuration-reference.mdx @@ -1136,6 +1136,16 @@ prefetch: { 用于生成响应式图像的断点。需要启用 `experimental.responsiveImages` 标志。通常不使用完整列表,而是根据源和输出大小进行过滤。使用的默认值取决于是使用本地还是远程图像服务。对于远程服务,使用更全面的列表,因为只生成所需的尺寸。对于本地服务,列表较短,以减少生成的图像数量。 +### image.experimentalDefaultStyles + +

+ +**类型:** `boolean`
+**默认值:** `true` +

+ +该选项用以控制是否自动添加全局样式,从而确保实验性图片功能可以正确地调整尺寸。该选项默认开启,但如果你想自行管理样式也可禁用该选项。该选项仅于 `experimental.responsiveImages` 标志启用时可用。 + ## Markdown 选项 ### markdown.shikiConfig diff --git a/src/content/docs/zh-cn/reference/experimental-flags/responsive-images.mdx b/src/content/docs/zh-cn/reference/experimental-flags/responsive-images.mdx index 1c47e50663782..b3e3804fa0d17 100644 --- a/src/content/docs/zh-cn/reference/experimental-flags/responsive-images.mdx +++ b/src/content/docs/zh-cn/reference/experimental-flags/responsive-images.mdx @@ -145,9 +145,9 @@ import myImage from '../assets/my_image.png'; > ``` -## 覆盖图像样式 +## 响应式图像默认样式 -响应式图片组件会应用少量默认样式,以确保其在不同布局模式下正确调整尺寸。这些样式根据布局类型自动适配,旨在与生成的 `srcset` 和 `sizes` 属性协同工作,实现最佳显示效果。以下是默认样式: +响应式图片组件会应用少量默认样式,以确保其在不同布局模式下正确调整尺寸。这些样式根据布局类型自动适配,旨在与生成的 `srcset` 和 `sizes` 属性协同工作,实现最佳显示效果: ```css title="Responsive Image Styles" :where([data-astro-image]) { @@ -162,10 +162,16 @@ import myImage from '../assets/my_image.png'; } ``` -你可以在 `` 或 `` 组件中,通过设置 `fit` 和 `position` 属性来覆盖 `object-fit` 和 `object-position` 样式。 +### 覆盖默认样式 -使用 [`:where()` 伪类](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where) 的样式,它的 [优先级](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_cascade/Specificity) 为 0,这意味着他可以轻松地被你个人的样式所覆盖。任何类样式或标签名都会具有比 `:where()` 更高的优先级,所以你可以轻松地为图像添加类名或标签名,以实现新样式的覆盖。 +使用 [`:where()` 伪类](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where) 的样式,它的 [优先级](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_cascade/Specificity) 为 0,这意味着他可以轻松地被你个人的样式所覆盖。任何 CSS 选择器都具有比 `:where()` 更高的优先级,所以你可以轻松地针对图像添加类名或标签名,以实现新样式的覆盖。 -Tailwind 4 是个特例,因为他使用了 [层叠层](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer),这意味着 Tailwind 的 CSS 规则优先级始终低于未使用层叠层的规则。由于 Astro 需要兼容不支持层叠层的浏览器,因此其图片组件无法使用此特性。这导致:若需通过 Tailwind 4 覆盖 Astro 图片默认样式,必须使用 [!important 修饰符](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier)。 +你可以在 `` 或 `` 组件中,通过设置 `fit` 和 `position` 属性来覆盖每个图像的 `object-fit` 和 `object-position` 样式。 + +如果你需要自行处理响应式图像的样式,那么你可以通过将 [`image.experimentalDefaultStyles`](/zh-cn/reference/configuration-reference/#imageexperimentaldefaultstyles) 选项设置为 `false` 来完全禁用默认的样式。 + +#### Tailwind 4 + +Tailwind 4 是个特例,因为他使用了 [层叠层](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer),这意味着 Tailwind 的 CSS 规则优先级始终低于未使用层叠层的规则。由于 Astro 需要兼容不支持层叠层的浏览器,因此其图片组件无法使用此特性。这导致:若需通过 Tailwind 4 覆盖 Astro 默认的图片样式,必须 [禁用默认样式](/zh-cn/reference/configuration-reference/#imageexperimentaldefaultstyles)。 有关完整概述以及提供有关此实验性 API 的反馈,请参阅 [响应式图像 RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md)。