哦，我明白了！关键是将父div设置为固定大小和相对大小，然后将Image设置为填充布局和包含objectFit。这种方法的唯一缺点是我需要设置媒体查询，以便它可以缩放为更小的大小。

<div className="relative item-detail">
  <Image src={currCommit.image.url} alt="Current Image" layout={'fill'} objectFit={'contain'} />
</div>

然后在css中我设置：

.item-detail {
  width: 300px;
  height: 225px;
}

我认为有更好的解决方案，NextImage有回调属性onLoadingComplete：
完全加载图像并删除占位符后调用的回调函数。
onLoadingComplete函数接受一个参数，即具有以下属性的对象：自然宽度、自然高度
您可以使用natural属性设置图像比率，而不会丢失NextImage的layout功能，如下所示：

const NaturalImage = (props: ImageProps) => {
  const [ratio, setRatio] = useState(16/9) // default to 16:9

  return (
    <NextImage
      {...props}
      // set the dimension (affected by layout)
      width={200}
      height={200 / ratio}
      layout="fixed" // you can use "responsive", "fill" or the default "intrinsic"
      onLoadingComplete={({ naturalWidth, naturalHeight }) => 
        setRatio(naturalWidth / naturalHeight)
      }
    />
  )
}

唯一的缺点是长宽比只在图像加载后应用，因此占位符使用默认比例（在本例中为16：9 - common），这可能导致CLS

根据bayu's asnwer，您可以创建一个名为RatioNextImage的自定义组件，并像这样使用它。

<RatioNextImage src={put_your_URL_here} alt={put_the_alt_here}/>

单位：RatioNextImage.tsx

import NextImage from "next/image";
import { useState } from "react";

interface Props {
  src: string;
  alt: string;
}

const RatioNextImage = ({ src, alt }: Props) => {
  const [ratio, setRatio] = useState(16 / 9); // this value can be anything by default, could be 1 if you want a square
  return (
    <NextImage
      src={src}
      width={200}
      height={200 / ratio}
      layout="fixed"
      onLoadingComplete={({ naturalWidth, naturalHeight }) => {
        setRatio(naturalWidth / naturalHeight);
      }}
    />
  );
};
export default RatioNextImage;

接下来的13年里，layout和objectFit都是deprecated支持内在的样式属性。这实际上使我们的工作更容易，因为你现在可以像普通CSS一样设计图像的样式，如下所示：

import Image from "next/image";

<div style={{ position: 'relative', width: '566px', height: '425px'}}>
    <Image fill 
        src={currCommit.image.url}
        alt="Current Image" 
        style={{objectFit: 'cover'}}
    />
</div>