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