Next.js Image- how to maintain aspect ratio and add letterboxes when needed

Ooh I got it! The key was to set the parent div to a fixed size and relative and then set the Image to a layout of fill and an objectFit of contain. The only downside to this approach is I need to set media queries so it will scale for smaller sizes.

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

Then in the css I set:

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