我想只指定图像的高度,并保持图像宽高比,而不是硬编码宽度。
在传统的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'”属性。
objectFit="contain"
?这里是一个带有我代码片段工作版本的示例 codesandbox:https://codesandbox.io/s/epic-margulis-0zkbs。 - juliomalvesaspectRatio: "<ratio>"
添加到容器的style
属性中。或者,您需要为容器本身提供显式的width
,但图像仍然会保持其纵横比。 - juliomalves