NextJS 13 + Tailwind CSS 图片响应式实现问题求助

一、图片响应式处理（完整显示且适配容器） #

针对你遇到的object-fit: contain无法填高、object-fit: cover裁剪的问题，提供两种可行方案：

方案1：固定容器高度+图片完整显示+背景补位 #

保留原容器的固定高度配置，调整Image组件样式，让图片完整显示的同时用背景色填充空白区域：

<div className="w-full h-[350px] md:h-[500px] -mt-1 md:-mt-3 relative bg-gray-100">
  <Image
    className="w-full h-full object-contain mx-auto"
    src={HeroImg}
    alt="hero-image"
    quality={100}
    fill={true}
    style={{ objectFit: 'contain' }}
  />
</div>

• object-contain保证图片完整无裁剪
• mx-auto让图片在容器内水平居中
• 容器添加bg-gray-100（可替换为你需要的品牌色/背景色）填充图片未覆盖的空白区域

方案2：自适应容器高度+图片填满宽度（无裁剪） #

如果允许容器高度随图片比例自适应，可去掉固定高度，用padding-top维持图片的原生宽高比（示例按16:9比例计算，对应padding-top: 56.25%）：

<div className="w-full -mt-1 md:-mt-3 relative" style={{ paddingTop: '56.25%' }}>
  <Image
    className="w-full h-full object-cover"
    src={HeroImg}
    alt="hero-image"
    quality={100}
    fill={true}
  />
</div>

• 替换56.25%为你实际图片的宽高比计算值（公式：高度/宽度*100%）
• 这种方式下图片会自动填满宽度，高度随比例自适应，完全无裁剪

二、文本“NAME OF THE COLLECTION”适配在图片上方 #

将标题文本移入图片容器内部，用绝对定位实现精准叠加，避免负margin在不同断点的偏移问题：

<div className="w-full flex flex-col justify-center items-center py-5">
  {/* 合并标题与图片容器 */}
  <div className="w-full h-[350px] md:h-[500px] -mt-1 md:-mt-3 relative bg-gray-100">
    {/* 标题文本：绝对定位居中 */}
    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 flex flex-col gap-2 text-center">
      <p className="text-[.7rem] sm:text-sm md:text-base uppercase text-greyLight font-normal">
        Everything about our
      </p>
      <h1 className="text-[2rem] sm:text-[2.5rem] md:text-[4rem] font-normal leading-tight tracking-tight">
        NAME OF THE <br /> COLLECTION
      </h1>
    </div>
    {/* 图片组件 */}
    <Image
      className="w-full h-full object-contain mx-auto"
      src={HeroImg}
      alt="hero-image"
      quality={100}
      fill={true}
      style={{ objectFit: 'contain' }}
    />
  </div>

  {/* 以下原有代码保持不变 */}
  <div className="-mt-10 z-10">
    <Line />
  </div>
  <Container>
    <p className="text-sm md:text-base text-center mt-2 font-shiseido font-light">
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it
      to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially
      unchanged. Lorem Ipsum has been the industry's standard dummy text
      ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make a type specimen book. It has survived not
      only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged
    </p>
  </Container>
  <Button
    onclickFunction={onclickFunction}
    title="EXPLORE ARTISTS"
    className="mt-7"
  />
</div>

• absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2让标题始终居中于图片上方
• z-10确保标题层级在图片之上
• 可根据设计需求调整top值（比如top-[20%]）改变标题的垂直位置

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