React+Tailwind CSS制作项目卡片组件及next/image适配问题求助

问题描述 #

我想要用React制作如图所示的项目卡片组件，尝试多种方法后未找到合适的参考文档，同时在使用next/image组件时难以控制图片的正确尺寸。目前已编写了一段代码，但实现效果与预期不符，附上了目标效果截图和当前效果截图。

现有代码：

const Project = ({ image, titile, description, technologies }) => {
  return (
    <div className="relative w-full h-64 bg-white">
      <Image fill src="/placeholder.jpg" />
      <div className="absolute w-[50%] h-8 bg-green-500 top-10 -left-10">
        Express, MongoDB, Node.js, React.js
      </div>
      <p>Project #2</p>
      <p>Blah blah blahs</p>
    </div>
  );
};

解决方案及优化代码 #

针对Next.js Image尺寸控制和卡片布局问题，调整后的代码如下：

import Image from 'next/image';

const Project = ({ image, title, description, technologies }) => {
  return (
    <div className="relative w-full h-64 bg-white overflow-hidden rounded-md shadow-md">
      {/* 控制图片显示效果 */}
      <Image
        fill
        src={image || '/placeholder.jpg'}
        alt={title || '项目图片'}
        objectFit="cover" // 保持图片比例并填充容器
      />
      
      {/* 技术标签栏 - 优化内容适配 */}
      <div className="absolute top-10 -left-3 flex items-center px-4 py-2 bg-green-500 text-white whitespace-nowrap overflow-x-auto">
        {technologies || 'Express, MongoDB, Node.js, React.js'}
      </div>
      
      {/* 项目信息区域 - 提升可读性 */}
      <div className="absolute bottom-0 w-full bg-black/60 text-white p-4">
        <h3 className="font-bold text-lg mb-1">{title || 'Project #2'}</h3>
        <p className="text-sm">{description || 'Blah blah blahs'}</p>
      </div>
    </div>
  );
};

export default Project;

关键优化点说明 #

• Next.js Image尺寸控制：通过objectFit="cover"让图片按比例填充容器，父容器添加overflow-hidden防止图片溢出；改用传入的image props动态加载图片，避免硬编码。
• 修复拼写错误：将titile修正为title，保证props传递正常。
• 技术标签适配：替换固定高度h-8为内边距py-2调整高度，添加whitespace-nowrap overflow-x-auto处理过长技术栈文本，同时调整-left-3避免标签完全超出页面左侧。
• 信息区域优化：将文本放在卡片底部，添加半透明背景提升文字可读性，同时使用传入的title和description props动态渲染内容。
• 视觉效果增强：添加rounded-md shadow-md让卡片更贴合常见项目卡片的视觉风格。

内容的提问来源于stack exchange，提问作者RakibulB