Next.js Image组件无法保留Contentful设置的宽高比求助

要实现像apple.com那样的横幅效果，核心是让容器始终保持2560x670的宽高比，同时让图片铺满容器并自动裁剪左右部分。以下是具体修改方案：

1. 计算宽高比的padding值 #

先算出图片的宽高比：670 / 2560 * 100 ≈ 26.171875%，利用CSS的padding-top百分比特性（基于容器宽度计算）可以固定容器的宽高比。

2. 修改代码 #

替换你当前的图片容器和Image组件配置：

<div className={`relative w-full px-componentPaddingMobile sm:px-componentPadding`}>
  {/*Background Images*/}
  <div className={`${smallHeroBackground ? "hidden tablet:flex" : "relative w-full h-0 pt-[26.171875%]"}`}>
    <Image
      src={`https:${heroMainBackground.fields.file.url}`}
      alt={heroMainBackground.fields.description}
      objectFit="cover"
      objectPosition="center" // 确保裁剪时图片居中，可选但推荐显式设置
      layout="fill"
      priority
    />
  </div>
</div>

关键修改点说明 #

• 外层容器：去掉flex justify-center，改为w-full，确保横幅占满视口宽度。
• 图片容器：
  • 去掉固定的w-[2560px] h-[670px]，改用w-full h-0 pt-[26.171875%]：h-0让容器高度完全由padding-top控制，pt-[26.171875%]保证宽高比和原图一致。
  • 保留relative定位，让内部layout="fill"的Image能铺满容器。
• Image组件：保留layout="fill"和objectFit="cover"，新增objectPosition="center"确保视口变化时图片始终居中裁剪（和apple的效果一致）。

为什么之前的尝试没生效？ #

• 固定宽高的容器（w-[2560px] h-[670px]）不会随视口宽度自适应，导致图片无法按比例缩放。
• padding技巧需要配合w-full和h-0才能正确生效，让容器高度随宽度动态调整。

内容的提问来源于stack exchange，提问作者aa-swe