reactjs - Next 具有固定宽度和自动高度的 JS 图像组件

Question

我正在使用 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>
      );
    }

这是当前的行为

谢谢
杰米

Answer 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"/>