NextJS 固定宽度和自动高度的图像组件

Posted 2023-03-06

【中文标题】NextJS 固定宽度和自动高度的图像组件

【英文标题】：NextJS Image component with fixed witdth and auto height

【发布时间】：2021-11-12 17:45:57

【问题描述】：

我正在使用 NextJS Image 组件。我希望图像填充 100% 的宽度，并尽可能多地保持高宽比。我已经尝试了此代码的许多不同变体，但除非我在父 div 上定义固定高度，否则它将无法工作。

export default function PhotoCard( img : Props) 
      return (
        <div className="relative w-full h-32 my-2">
          <Image alt=img.title src=img.url layout="fill" objectFit="cover" />
        </div>
      );
    

这是当前行为

谢谢 杰米

【问题讨论】：

尝试直接在<Image />标签内设置图片。

【参考方案1】：

你可以尝试用“%”的方式设置宽高..

<Image src=image.url alt=image.title   layout="responsive" objectFit="contain"/>

或者您可以像这样使用“vw”属性设置宽度..

<Image src=image.url alt=image.title   layout="responsive" objectFit="contain"/>