相关疑难解决方法(0)

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

我正在使用 NextJS 图像组件。我希望图像填充 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>
      );
    }
Run Code Online (Sandbox Code Playgroud)

这是当前的行为 应用程序中的图像

reactjs next.js tailwind-css nextjs-image

41
推荐指数
4
解决办法
5万
查看次数

标签 统计

next.js ×1

nextjs-image ×1

reactjs ×1

tailwind-css ×1