在 Next js 中给出高度的同时保持图像比例

【问题标题】：Keep the image ratio while giving a height in Next js在 Next js 中给出高度的同时保持图像比例
【发布时间】：2022-01-11 20:35:44
【问题描述】：

我试图为 Next js 提供 500px 的高度，同时保持图像的比例。我还没有找到任何方法。

   <div className='relative text-center'>
        <Image
          layout="fixed"
          objectFit={'contain'}
          loading="lazy"
          src={image.url}
          alt={image.name}
          width={500}
          height={500}
        />
      </div>

【问题讨论】：

如果它像在 HTML/CSS 中一样工作，如果你只指定高度或宽度，它将保持图像的比例。
@T.Trassoudaine 这就是问题所在，如果只指定一个就会出错。

标签： javascript reactjs image next.js height

【解决方案1】：

您需要在 Image 组件作为封面时修复父级的高度，有关详细信息，请查看 next/image doc

<div className='relative text-center h-96'>
    <Image
       layout="fill"
       objectFit="contain"
       src={image.url}
       alt={image.name}
   />
</div>

大约 500px 你可以在tailwind.config.js 上定义自定义高度doc 上的更多信息

【讨论】：

这个解决方案的问题是没有显示完整的图像。
@AminDarian 在这种情况下我们可以使用contain 而不是cover，我编辑了答案
也这样做了，现在图像的高度不会是 500 像素，例如宽度是 900 像素。
您可以按照 div 上的 tailwindcss 文档说明定义高度