如何实现固定宽度、动态高度且保留原图比例的Next.js Image组件

API 探路者

2026-10-13

解决方案

方案1：使用Next.js Image的`fill`属性（固定容器比例场景）

直接利用Next.js Image内置的fill属性让图片填满父容器，仅需要给父容器添加相对定位，同时配置objectFit保证图片比例不变：

<Box w="500px" h="500px" position="relative" bg="red">
  <Image
    src={allArtPieces[0].imageUrl}
    alt={allArtPieces[0].title}
    fill
    objectFit="contain"
    /* 如果你需要图片铺满容器且裁剪超出部分，把contain改成cover即可 */
  />
</Box>

该方案不需要单独声明图片的width、height属性，fill会自动继承父容器尺寸
objectFit: contain会保证图片完整显示、不拉伸、不溢出容器，自动保留原始比例

方案2：传入图片原始宽高属性（容器高度自适应场景）

Sanity CMS返回的图片资源本身自带原始宽高数据，你可以在查询时直接获取，作为width、height属性传给Next.js Image，再用样式覆盖渲染尺寸即可：

首先修改你的Sanity GROQ查询，拉取图片宽高：

*[_type == "artPiece"]{
  title,
  "imageUrl": image.asset->url,
  "imgWidth": image.asset->metadata.dimensions.width,
  "imgHeight": image.asset->metadata.dimensions.height
}

调整组件代码：

<Box w="500px" bg="red">
  <Image
    src={allArtPieces[0].imageUrl}
    alt={allArtPieces[0].title}
    width={allArtPieces[0].imgWidth}
    height={allArtPieces[0].imgHeight}
    w="100%"
    h="auto"
    objectFit="contain"
  />
</Box>