Next.js Image Component Not Maintaining Aspect Ratio on High-DPI Displays
I'm stuck on something that should probably be simple... I've spent hours debugging this and I'm currently working with an scenario where images rendered with the Next.js Image component are not maintaining their aspect ratio correctly on high-DPI displays. I'm using Next.js version 12.1.0 and have set the layout prop to 'responsive'. However, when I view these images on devices with higher pixel density (like Retina displays), they seem to stretch and distort instead of keeping their intended aspect ratio. Here's the implementation I have: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/path/to/image.jpg" alt="An example image" layout="responsive" width={1200} height={800} quality={90} /> ); }; ``` I've tried changing the width and height values to match the original aspect ratio of the image, but it doesn't seem to help. Additionally, I've checked the CSS styles applied to the container, ensuring that there are no conflicting styles affecting the display. The image appears fine on standard displays, but the question is evident on my MacBook Pro with Retina display. I've also looked into potential fixes like setting the object-fit property in CSS, but since the Image component handles this automatically, Iām not sure what else to try. Any insights on how to ensure the image retains its aspect ratio consistently across different devices would be greatly appreciated! I'd love to hear your thoughts on this.