Akhila Ariyachandra

Next.js Images with Tailwind Typography

Fix the aspect ratio of images in MDX

When using the Next.js Image component in MDX with Tailwind Typography your image might appear with an incorrect aspect ratio like this.

jsx
<Image
  src="/snippets/next-js-image-tailwind-typography/example.jpg"
  width={1200}
  height={630}
/>
Stretched example

To fix it all you need to do is to add the object-contain class.

jsx
<Image
  src="/snippets/next-js-image-tailwind-typography/example.jpg"
  width={1200}
  height={630}
  className="object-contain"
/>