如何在Tailwind中创建宽高相等的卡片网格？

AI 小北

2026-6-15

解决方案

要解决图片侧边留白、容器宽高不一致的问题，你可以通过以下调整实现统一的容器尺寸，同时让图片适配容器：

给每个图片的外层容器添加相对定位和固定宽高比，确保所有容器尺寸统一
调整Next.js Image组件的属性，让它填满容器，避免留白
根据需求选择图片的适配方式（裁剪或保留完整比例）

修改后的代码

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
  {
    IMAGES.map((props) => (
      <div class="col-span-1 flex flex-col w-full">
        {/* 图片容器：固定比例 + 相对定位 + 溢出隐藏 */}
        <div class="relative w-full aspect-[4/3] overflow-hidden rounded-lg">
          <Image
            class="object-cover object-center" // 填满容器，裁剪多余部分
            quality={75}
            fill // 让Image自动填满父容器
            {...props}
          />
        </div>
        <h4 class="text-[#00473e] font-semibold text-lg leading-normal mt-2 max-w-60">
          {props.alt}
        </h4>
      </div>
    ))
  }
</div>

关键调整说明

容器设置：relative 是为了让带fill属性的Image能相对它定位；aspect-[4/3]可根据需求修改比例（比如aspect-square是正方形、aspect-[16/9]是宽屏比例）；overflow-hidden配合object-cover裁剪超出容器的图片部分。
Image组件：移除固定width属性，添加fill让图片自动填满父容器；将object-contain改为object-cover，避免侧边留白。
若想完整显示图片不裁剪，可保留object-contain，并给容器添加背景色（如bg-gray-100），弱化留白视觉效果。