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

【问题标题】：NextJS Image component with fixed witdth and auto heightNextJS 固定宽度和自动高度的图像组件
【发布时间】：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 />标签内设置图片。

标签： reactjs next.js tailwind-css

【解决方案1】：

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

<Image src={image.url} alt={image.title} width="100%" height="100%" layout="responsive" objectFit="contain"/>

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

<Image src={image.url} alt={image.title} width="100vw" height="100%" layout="responsive" objectFit="contain"/>

【讨论】：