如何在Next.js中仅指定图像高度并保持宽高比？

Question

我想只指定图像的高度，并保持图像宽高比，而不是硬编码宽度。

在传统的img元素中，我可以这样做：

<img src="/logo.png" alt="logo" height={30} />

但如果我尝试使用next/image：

<Image src="/logo.png" alt="logo" height={30} />;

我收到了以下错误提示：

错误：src为“/logo.png”的图像必须使用“width”和“height”属性或“layout ='fill'”属性。

- Kazuto_Ute

Answer 1

您可以将layout="fill"和objectFit="contain"设置为Image，以便在填充其容器时保持其纵横比。然后，您可以在Image组件周围添加一个包装器div并将height应用于它。

<div style={{ position: 'relative', height: '30px' }}>
    <Image
        src="/logo.png"
        layout="fill"
        objectFit="contain"
    />
</div>

- juliomalves

---

谢谢您的帮助，但我仍然得到了错误的图像宽度。例如，如果我创建一个仅返回<img>元素的页面组件，则该元素位于左侧，并且其宽度仍然遵循纵横比。但是，如果组件返回<div> + <Image>元素，则图像现在会跨越整个屏幕。 - Kazuto_Ute

@Kazuto_Ute，你是否按照我的示例设置了 objectFit="contain"？这里是一个带有我代码片段工作版本的示例 codesandbox：https://codesandbox.io/s/epic-margulis-0zkbs。 - juliomalves

是的，这就是我的意思，第二个img元素被拉伸到整个屏幕。如果我想让img元素的宽度仍然遵循纵横比而不是被拉伸呢？ - Kazuto_Ute

你是否已经预先知道宽高比？如果是这样，您可以将 aspectRatio: "<ratio>" 添加到容器的 style 属性中。或者，您需要为容器本身提供显式的 width，但图像仍然会保持其纵横比。 - juliomalves

不幸的是，使用的图片（因此纵横比）可能会不时更改。理想情况下，我不想每次设计团队推出新图片时都更改代码。那么在这种情况下，没有办法不硬编码宽度或纵横比吗？ - Kazuto_Ute

我想我们永远不会知道... - Denny