Utilizing the Image Nextjs Component to center my image on the page has proven challenging. Despite aiming for the picture to maintain its true size, it appears pixelated. Additionally, when reducing the screen width, the image fails to display correctly for smaller screens, causing a portion of the picture to vanish.
<div
style={{
position: 'relative',
width: '1000px',
height: '500px',
alignItems: 'center',
}}
>
<Image src='/services.png' alt='' layout='fill' objectFitt='fill' />
</div>
The source of the issue seems to lie within the div's styling properties. I've attempted various adjustments to the width and height, yet the distorted image persists on the page. Even changing the objectFit attribute to 'cover' hasn't resolved the problem :( I welcome any guidance or insights on how to insert an image without sacrificing quality. Thank you immensely. The dimensions of the picture are: width=1454px and height=455px View the image here