Next.js 图像组件的响应式修复

目前，layout="responsive"需要您设置宽度和高度，但您不想设置，因为您不知道纵横比是多少。

这是自10.0.1版本以来的一个新的变化，其中 Next 团队弃用了该unsizedprop，并用layout="fill"– 代替它，但它不会为您提供相同的功能。

另外，如果你要在图像组件上设置layout="fill"和 ，objectFit="cover"你会看到奇怪的行为。有些情况下，你可以在父项上使用position:relative来解决这个问题，但如果是响应式图像，你还需要设置width和 ，而height这并非你想要的。

这个问题有一个简单的解决方法，你只需要在图像组件周围设置一个包装器来提供一些额外的样式。

首先，我们需要添加带有 image-container 类的包裹项。请根据你的样式需求进行调整，例如，如果你使用了 styled-components，语法会略有不同。

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

为了使其正常工作，需要添加两个类：将 image-container 添加到父元素，将 image 添加到 Image 组件。添加这些类后，您应该添加此样式。

.image-container {

  width: 100%;

  > div {
    position: unset !important;
  }

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

就这样！🎉

您的图像现在应该以正确的尺寸显示，并且应该缩放到 100% 宽度，同时具有正确的高度。