Next.js + Tailwind：object-cover不裁剪图片、圆角失效问题求助

数据老陈

2026-7-1

Next.js + Tailwind 卡片组件问题

我正在使用Next.js搭配Tailwind开发站点，制作用于展示项目的卡片组件。由于图片尺寸不一致，我希望统一所有卡片的外观。

注：这是我的第一个项目，若CSS存在问题敬请谅解。

遇到的问题

尝试使用object-cover属性，但Image组件仍溢出外层div容器；
卡片顶部及Image组件底部的圆角未生效，我已使用rounded-t-2xl rounded-b-md类。

卡片组件代码

return (
    <div className="bg-cyan-50 rounded-2xl basis-1/3 shadow-lg flex flex-col">
      <div className="h-60 object-cover rounded-t-2xl rounded-b-md ">
        <Image
          src={image}
          alt={imageAlt}
          className="m-auto object-cover"
        ></Image>
      </div>
      <div className="px-6 pb-6 pt-6 flex flex-col flex-1">
        <h1 className="text-5xl mb-4">{name}</h1>
        <p className="mb-8">{description}</p>
        <div className="flex justify-between items-center mt-auto">
          <Link href={link}>
            <button
              type="button"
              className="bg-cyan-500 py-2 px-4 text-xl text-white rounded-xl hover:bg-cyan-600 shadow-lg inline-block"
            >
              {buttonText}
            </button>
          </Link>
          <div className="float-right">{children}</div>
        </div>
      </div>
    </div>
  );