这并不容易发现，但正确的食谱应该是这样的：

<Image
    sizes="(min-width: 768px) 80px, 60px"
    layout="responsive"
    alt="Logo IE"
    width={230}
    height={208}
    src="/src/image.jpg"
  />

我使用宽度和高度与最大大小（帮助下一个知道纵横比）和大小属性来设置大小，以在不同的分辨率中使用，如下所示：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

有一种方法可以做到这一点。首先，你用容器 Package 图像。

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

然后添加CSS：

.image-container {

  width: 100%;

  > div {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
}