Next.js Image Component Causing Unintended Zoom Effect on Mobile Devices
I'm working through a tutorial and I'm relatively new to this, so bear with me. I'm currently working on a Next.js project (version 12.0.7) where I use the `next/image` component to serve images. I’ve noticed that when I view the images on mobile devices, they appear zoomed in, cropping part of the image instead of fitting properly within their containers. This scenario seems to happen specifically with images that have a higher aspect ratio than their container. I’ve tried setting the `layout` prop to both `responsive` and `fill`, but the scenario continues. Here's a snippet of what I have: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div style={{ position: 'relative', width: '100%', height: '300px' }}> <Image src="/path/to/my/image.jpg" alt="A descriptive alt text" layout="fill" objectFit="contain" /> </div> ); }; ``` When I inspect the mobile view in Chrome DevTools, I can see that the image is indeed loading but the scaling seems to be off. I also tried adjusting the CSS for the parent div, like adding `overflow: hidden`, but that didn't fix it. Furthermore, I checked the device pixel ratio, and it seems to be 2x as expected. Could this be related to how the `next/image` component calculates the dimensions based on the device viewport? I’m uncertain if there’s a different approach or configuration I should use to ensure that images are displayed correctly on mobile without being zoomed in. Is there a better approach? This is for a CLI tool running on Windows 10. Is there a simpler solution I'm overlooking?