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

Posted 2023-03-06

【中文标题】如何在 Next.js 中仅指定图像高度并保持纵横比？

【英文标题】：How to specify image height only and keep aspect ratio in Next.js?

【发布时间】：2021-11-14 02:57:56

【问题描述】：

我只想指定我的图像高度并保持图像纵横比而不对宽度进行硬编码。

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

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

但是如果我尝试使用next/image:

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

我收到以下错误：

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

【参考方案1】：

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

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

【讨论】：

感谢您的帮助，但我仍然得到图像的错误宽度。例如，如果我创建一个仅返回 元素的页面组件，则该元素位于左侧，并且其宽度仍与纵横比有关。但是，如果组件返回 + 元素，则图像现在会横跨屏幕。

@Kazuto_Ute 您是否按照我的示例设置了objectFit="contain"？这是一个带有我的 sn-p 工作版本的示例代码框：codesandbox.io/s/epic-margulis-0zkbs。

是的，这就是我的意思，第二个 img 元素在屏幕上拉伸。如果我希望 img 元素宽度仍然尊重纵横比而不是拉伸怎么办？

你事先知道长宽比吗？如果是这样，您可以将 aspectRatio: "<ratio>" 添加到容器 style 属性中。或者，或者，您需要为容器本身提供明确的width，但图像仍将保持其纵横比。

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