在Next.js响应式布局中，如何让Image组件填满父容器高度且宽度溢出？

• 需求：实现响应式交替布局，宽度占比为38%/62%；左侧38%区域的Image组件需填满父容器高度，同时宽度溢出至右侧62%区域的图片下方
• 踩坑记录：
  • 尝试绝对定位：布局缩放时无法与其他部分同步收缩，且定位不相对于容器
  • 使用object-cover：图片超出父容器的部分被裁剪，无法满足溢出需求
• 当前代码问题：第一行模块要么图片填满容器宽度但高度不足，要么填满高度但溢出部分被裁剪（当前呈现后者效果）

依赖版本：

{
  "next": "13.3.4",
  "postcss": "8.4.23",
  "prop-types": "^15.8.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "tailwindcss": "3.3.2"
}

原代码片段：

<section className="relative w-full px-8 py-16">
  <div className="wrapper max-w-screen-xl mx-auto">

    {/* Section First Row Item */}
    <div className="alternateLayout flex flex-col md:flex-row justify-center mt-8 mx-auto py-0 md:py-0 items-center border-[1px] border-black">
      {/* Image bananaPeel should fill the height of the alternateLayoutImage container and overflow it to the right */}
      <div className="alternateLayoutImage md:w-[38%] aspect-[10/9] flex-shrink-0 relative bg-black overflow-x-visible">
        <Image
          src={bananaPeel}
          alt="Banana Peel"
          width={561}
          height={512}
          className="rounded-none object-cover object-left h-full mx-auto"
        />
      </div>

      {/* Content Right */}
      <div
        className={`alternateLayoutContent md:w-auto md:h-auto md:mr-[51px] md:ml-[51px] md:mt-0 md:order-last items-center`}
      >
        <h2 className="text-Display-md-Bold md:text-Display-xl-Bold my-2 text-left text-black_txt">
          {"Title row section"}
        </h2>
        <Image
          src={mainImageSection}
          alt=""
          width={560}
          height={511}
          className="rounded-none object-cover object-center h-full mx-auto"
        />
      </div>
    </div>
    {/* End Row Item */}

    {/* Section Second Row Item */}
    <div className="alternateLayout flex flex-col md:flex-row justify-center mx-auto py-0 md:py-0 items-center">
      {/* Image */}
      <div className="alternateLayoutImage md:w-[38%] flex-shrink-0 relative overflow-hidden">
        <Image
          src={img2}
          alt="img2"
          width={560}
          height={511}
          className="rounded-none object-cover object-center aspect-[10/9] border-0 border-black_txt"
        />
      </div>

      {/* Content Left */}
      <div
        className={`alternateLayoutContent md:w-auto md:h-auto md:mt-0 md:ml-[51px] md:mr-[51px] md:order-first items-center`}
      >
        <p>
          {"Lorep ipsum"}
        </p>
      </div>
    </div>
    {/* End Row Item */}
  </div>
</section>

核心思路：让左侧图片容器保持高度约束，利用Next.js Image的fill属性和绝对定位，让图片高度填满容器、宽度自动延伸溢出，同时保证响应式同步。

具体修改点：

1. 布局容器：将alternateLayout的items-center改为items-stretch，确保左右子元素高度一致
2. 左侧图片容器：移除overflow-x-visible（无需限制溢出），保留aspect-[10/9]固定高度比例、relative作为定位参考
3. 左侧Image组件：
   • 移除固定width/height，添加fill={true}让图片填充容器空间
   • 设置className为absolute left-0 top-0 h-full w-auto object-left，保证高度填满容器，宽度自动计算且不被裁剪
   • 添加priority（可选，优化首屏图片加载）

修改后的代码片段：

<section className="relative w-full px-8 py-16">
  <div className="wrapper max-w-screen-xl mx-auto">

    {/* Section First Row Item */}
    <div className="alternateLayout flex flex-col md:flex-row justify-center mt-8 mx-auto py-0 md:py-0 items-stretch border-[1px] border-black">
      {/* Image bananaPeel fills height and overflows to right */}
      <div className="alternateLayoutImage md:w-[38%] aspect-[10/9] flex-shrink-0 relative bg-black">
        <Image
          src={bananaPeel}
          alt="Banana Peel"
          fill={true}
          priority
          className="rounded-none object-left h-full w-auto"
        />
      </div>

      {/* Content Right */}
      <div
        className={`alternateLayoutContent md:w-[62%] md:h-auto md:mr-[51px] md:ml-[51px] md:mt-0 md:order-last flex flex-col justify-center items-center`}
      >
        <h2 className="text-Display-md-Bold md:text-Display-xl-Bold my-2 text-left text-black_txt">
          Title row section
        </h2>
        <Image
          src={mainImageSection}
          alt=""
          width={560}
          height={511}
          className="rounded-none object-cover object-center w-full"
        />
      </div>
    </div>
    {/* End Row Item */}

    {/* Section Second Row Item */}
    <div className="alternateLayout flex flex-col md:flex-row justify-center mx-auto py-0 md:py-0 items-stretch mt-16">
      {/* Content Left */}
      <div
        className={`alternateLayoutContent md:w-[62%] md:h-auto md:mt-0 md:ml-[51px] md:mr-[51px] md:order-first flex flex-col justify-center items-center`}
      >
        <p>
          Lorep ipsum
        </p>
      </div>

      {/* Image */}
      <div className="alternateLayoutImage md:w-[38%] aspect-[10/9] flex-shrink-0 relative">
        <Image
          src={img2}
          alt="img2"
          fill={true}
          className="rounded-none object-center h-full w-auto"
        />
      </div>
    </div>
    {/* End Row Item */}
  </div>
</section>

额外说明：

• 右侧内容容器明确设置md:w-[62%]，保证布局占比准确
• 右侧Image添加w-full让图片适配容器宽度
• 第二行布局调整了内容和图片的顺序，保持交替布局逻辑，同时统一使用items-stretch保证高度对齐

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