Is there a way to set an image's size dynamically at build time with Next.js and next-mdx-remote blog posts?

Question

I'm working on a personal blog using Next.js, Tailwind, and next-mdx-remote. I would like to be able to use the Next.js Image component for any images that appear in my posts, and I would like those images to take up the full width of the containing page component, and then be as tall as necessary to perfectly display its content. Currently, I'm doing this by including a custom <MDXImage /> component in my .mdx files, which looks like this:

const MDXImage = ({ className = "", ...rest }: ImageProps) => {
    return (
        <div
            className={`relative mx-0 my-4 w-full aspect-[1.5] overflow-hidden shadow-md rounded ${className}`}
        >
            <Image layout="fill" objectFit="cover" objectPosition="top" {...rest} />
        </div>
    );
};

My issue is that every time I add the component in my .mdx, I also have to set its aspect ratio. This gets tedious when I'm trying to avoid any whitespace or cropping - I end up either manually calculating or using the browser tools to fine tune the aspect-ratio and end up with code inside my .mdx files that looks like this:

<MDXImage src="/images/test.png" alt="test" className="aspect-[1.88751]" />

I tried importing the image into the .mdx files to use the StaticImageData instead of a string src, but apparently imports don't work in next-mdx-remote (and passing every single image as a component to the <MDXRemote /> component doesn't sound like a great solution either, unless I can do that dynamically somehow).

Is there an easier way to do this that isn't so tedious? Or am I stuck manually entering an aspect ratio for every image I add in my blog posts?