实验性响应式图片

类型：boolean
默认：false

¥Type: boolean
Default: false

Added in: astro@5.0.0

在你的项目中启用对自动响应图片的支持。

¥Enables support for automatic responsive images in your project.

{
  experimental: {
    responsiveImages: true,
  },
}

启用此标志后，你可以将 layout 属性传递给任何 <Image /> 或 <Picture /> 组件以创建响应式图片。

¥When this flag is enabled, you can pass a layout prop to any <Image /> or <Picture /> component to create a responsive image.

设置布局时，图片会根据图片的尺寸和布局类型自动生成 srcset 和 sizes 属性。具有 responsive 和 full-width 布局的图片将应用样式以确保它们根据其容器调整大小。

¥When a layout is set, images have automatically generated srcset and sizes attributes based on the image’s dimensions and the layout type. Images with responsive and full-width layouts will have styles applied to ensure they resize according to their container.

---
import { Image, Picture } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="A description of my image." layout='responsive' width={800} height={600} />
<Picture src={myImage} alt="A description of my image." layout='full-width' formats={['avif', 'webp', 'jpeg']} />

此 <Image /> 组件将生成以下 HTML 输出：

¥This <Image /> component will generate the following HTML output:

<img
  src="/_astro/my_image.hash3.webp"
  srcset="/_astro/my_image.hash1.webp 640w,
      /_astro/my_image.hash2.webp 750w,
      /_astro/my_image.hash3.webp 800w,
      /_astro/my_image.hash4.webp 828w,
      /_astro/my_image.hash5.webp 1080w,
      /_astro/my_image.hash6.webp 1280w,
      /_astro/my_image.hash7.webp 1600w"
  alt="A description of my image"
  sizes="(min-width: 800px) 800px, 100vw"
  loading="lazy"
  decoding="async"
  fetchpriority="auto"
  width="800"
  height="600"
  style="--w: 800; --h: 600; --fit: cover; --pos: center;"
  data-astro-image="responsive"
>

应用以下样式以确保图片正确调整大小：

¥The following styles are applied to ensure the images resize correctly:

[data-astro-image] {
  width: 100%;
  height: auto;
  object-fit: var(--fit);
  object-position: var(--pos);
  aspect-ratio: var(--w) / var(--h)
}

[data-astro-image=responsive] {
  max-width: calc(var(--w) * 1px);
  max-height: calc(var(--h) * 1px)
}

[data-astro-image=fixed] {
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px)
}

响应式图片属性

¥Responsive image properties

这些是启用响应式图片时 <Image /> 和 <Picture /> 组件可用的附加属性：

¥These are additional properties available to the <Image /> and <Picture /> components when responsive images are enabled:

layout：图片的布局类型。可以是 responsive、fixed、full-width 或 none。默认为 image.experimentalLayout 的值。
fit：定义如果纵横比发生变化，应如何裁剪图片。值与 CSS object-fit 的值匹配。默认为 cover，或如果设置，则为 image.experimentalObjectFit 的值。
position：定义如果纵横比发生变化，裁剪图片的位置。值与 CSS object-position 的值匹配。默认为 center，或如果设置，则为 image.experimentalObjectPosition 的值。
priority：如果设置，则急切加载图片。否则，图片将被延迟加载。将其用于最大的首屏图片。默认为 false。

widths 和 sizes 属性是根据图片的尺寸和布局类型自动生成的，在大多数情况下不应手动设置。为 responsive 和 full-width 图片生成的 sizes 属性基于以下假设：当视口小于图片宽度时，图片显示在接近屏幕全宽的位置。如果差异很大（例如，如果在小屏幕上采用多列布局），你可能需要手动调整 sizes 属性以获得最佳效果。

¥The widths and sizes attributes are automatically generated based on the image’s dimensions and the layout type, and in most cases should not be set manually. The generated sizes attribute for responsive and full-width images is based on the assumption that the image is displayed at close to the full width of the screen when the viewport is smaller than the image’s width. If it is significantly different (e.g. if it’s in a multi-column layout on small screens) you may need to adjust the sizes attribute manually for best results.

densities 属性与响应式图片不兼容，如果设置将被忽略。

¥The densities attribute is not compatible with responsive images and will be ignored if set.

响应式图片配置设置

¥Responsive image configuration settings

你可以通过将 image.experimentalLayout 设置为默认值来为所有 <Image /> 和 <Picture /> 组件启用响应式图片。此设置可以被每个组件上的 layout 属性覆盖。

¥You can enable responsive images for all <Image /> and <Picture /> components by setting image.experimentalLayout with a default value. This settings can be overridden by the layout prop on each component.

{
  image: {
    // Used for all `<Image />` and `<Picture />` components unless overridden
    experimentalLayout: 'responsive',
     },
  experimental: {
    responsiveImages: true,
  },
}

将 responsive 设置为默认布局后，你可以覆盖任何单个图片的 layout 属性：

¥With responsive set as the default layout, you can override any individual image’s layout property:

---
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。

¥For a complete overview, and to give feedback on this experimental API, see the Responsive Images RFC.